jQueryサムネイルクリック後のsettimeout、連打時の挙動について

いつもお世話になっております。

先日、こちらで以下の質問をさせていただきました。

jQuery サムネイルクリックで画像切替時、３回目のクリック以降classが外れない

おかげさまでclassは外れるようになったのですが、
今度はサムネイルのクリック間隔がsettimeoutの設定時間より早い時や連続クリック時、
画像のアニメーション挙動が早くなるということで悩んでおります。

これは、settimeoutoで1.5後にアニメーション用のclassが外れるようにするためのコードが、
連打時に後続のクリックイベントに影響を与えてるのだろうと理解しました。
(わかりにくい書き方ですみません、、)

そこで、settimeoutが完了するまでにサムネイルがクリックされた場合はsettimeoutをキャンセルし、
最後のsettioutのみを動作させるようにすればいいのかと考え、
クリックイベント前にflagを立てて、その中身でイベントを振り分けるということをしてみたのですが動作は変わらず、

キューを削除すべくdequequeを足してみても、今度はアニメーションが２枚目以降起こらなくなってしまい、悩んでおります。

以下、コードになります。

html
1<div class="bl_garally_imgUnit">
2  <div id="mainImg" class="bl_garally_mainImg">
3    <img src="https://placehold.jp/1500x800.png" alt="メインイメージ">
4  </div>
5  <ul id="thumbs" class="bl_garally_thumbUnit">
6     <li class="current"><img src="https://placehold.jp/1500x800.png" alt="サムネイル"></li>
7     <li><img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></li>
8     <li><img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></li>
9   </ul>
10  </div>
11
12 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

jQuery
1$(document).ready(function () {
2  $('#thumbs img').on('click', function () {
3    //mainに切り替えるimgのsrc取得
4    img = $(this).attr('src');
5
6    //currentクラス付け替え
7    $('#thumbs li').removeClass('current');
8    $(this).parent().addClass('current');
9
10    $('#mainImg img').attr('src', img);
11    $('#mainImg').addClass('scroll_on');
12    setTimeout(function() {
13 　　$('#mainImg').removeClass('scroll_on');
14    },1500);
15  });
16});

css
1@keyframes scroll_img {
2  100% {
3    transform: translateX(100%);
4  }
5}
6
7.bl_garally_mainImg {
8  overflow: hidden;
9  position: relative;
10  &.scroll_on::before {
11    animation: scroll_img 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
12    background: #fff;
13    bottom: 0;
14    content: '';
15    left: 0;
16    pointer-events: none;
17    position: absolute;
18    right: 0;
19    top: 0;
20    z-index: 1;
21  }
22}
23
24.bl_garally_thumbUnit {
25  display: flex;
26  justify-content: flex-end;
27  margin-top: 10px;
28  & img {
29    // float: right;
30    width: 80px;
31    margin-left: 10px;
32  }
33  & li.current img{
34    border: 2px solid #333;
35  }
36}
37.bl_garally_imgUnit {
38  max-width: 500px;
39  margin: auto;
40}
41img {
42  width: 100%;
43  height: auto;
44}