clearTimeoutでsetTimeoutを消したい

Question

画像が一定時間ごとにスライドするようにしてあります。
数字が書いてあるボタン（インデックスボタン)を押すと対応する画像がにスライドします。
その時、一定時間ごとに動いていた画像を動かないようにしたく、clearTimeoutを使ってsetTimeoutを消したいのですが、うまくいかず困っております。

自分では、
①インデックスボタンを押すとautoslider1がclearTimeoutで消される。
②4秒後にautoslider3が呼び出される。
③loopCounterがクリックされたインデックスボタンの番号に上書きされる。
となると想定してコードを書いたつもりでしたが、実際はautoslider1が消されることなくautoslider3でloopCounterが上書きされます。
そのため、一定時間が経過するとスライドが動き続けてしまっている状態です。

説明がわかりにくく大変申し訳ございませんが、わかる方がいらっしゃればご教授いただければ幸いです。

<section class="carousel-3">
      <div class="carousel-h">
        <h1>Carousel 3</h1>
      </div>
      <div class="slider-wrapper3">
        <p class="slider-title3">carousel  スライドで出現</p>

          <div class="slides-container3">
            <ul class="slides3 transition" id="slide_case">
              <li class="slide3 no1 start "><img src="./img/1.png" alt=""></li>
              <li class="slide3 no2 start"><img src="./img/2.png" alt=""></li>
              <li class="slide3 no3 start "><img src="./img/3.png" alt=""></li>
              <li class="slide3 no4 start"><img src="./img/4.png" alt=""></li>
              <li class="slide3 no5 start"><img src="./img/5.png" alt=""></li>
            </ul>
          </div>

        <div class="index-btn-wrapper3">
  <!--index_btn_coveにclass名にstopを入れるとindexボタンを押した時オートスライドが停止する-->
          <ul id="index_btn_cover" class="stop">
          </ul>
        </div>
      </div>
    </section>

  jQuery(function($){
    var slideList=$('.slide3');
    var slideLength=slideList.length;
  
    //htmlにスライドを追加すると自動でスライドを追加する
    let slideCopyRoot=document.getElementById('slide_case');
    for(i=0; i<slideLength; i++){
        let slideCopy=slideCopyRoot.children[i].cloneNode(true);
        document.getElementById('slide_case').appendChild(slideCopy);   
    }
    


    //htmlでスライド（画像）を追加した時（一番下に記入した時）一番上に自動で移動させる記述（center画像をhtmlの一番上に記述したものにするため。）
    let slideCase=document.getElementById('slide_case');
    let slideCaseLastChild=document.getElementById('slide_case').lastElementChild;
    let slideCaseFirstChild=document.getElementById('slide_case').firstElementChild;
    slideCase.insertBefore(slideCaseLastChild,slideCaseFirstChild);
    //

    //=================================================//
    //autoslider
    //=================================================//
    var loopCounter=0;
    var autoslider1=function(indexNo){
        console.log(loopCounter);
        if( loopCounter == slideLength){
            $('.slides3').removeClass('transition');
            setTimeout(autoslider2,0);
        }else{
            $('.slides3').addClass('transition');
            loopCounter+=1;
            $('.slides3').css('transform','translateX('+loopCounter*(-100)+'%)');
                setTimeout(autoslider1,2000);
        }
    }

    var autoslider2=function(){
        loopCounter=0;
        $('.slides3').css('transform','translateX(0%)');

        setTimeout(autoslider1,100);
    }

    var autoslider3=function(indexNo){
        loopCounter=indexNo;
        console.log(loopCounter);
    }

    setTimeout(autoslider1,1000);

    //=================================================//
    //indx_btnの作成
    //=================================================//
    for(i=0; i<slideLength; i++){
        let indexBtn=document.createElement('li');
        indexBtn.id="index-btn"+i;
        indexBtn.className="index-btn3";
        indexBtn.textContent=i+1;
        document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
    }

    //=================================================//
    //index_btnを押した時のスライド制御
    //=================================================//
    $('.index-btn3').click(function(){
        var indexNo=$('.index-btn3').index( $(this) );
        $('.slides3').css('transform','translateX('+indexNo*(-100)+'%)');
        if( $('#index_btn_cover').hasClass('stop') ){
            console.log('stop');
            clearTimeout(autoslider1);
            setTimeout(autoslider3(indexNo),4000);
        }else{
            console.log("don't stop");
        }
    });


});//jQuery end

Comments

[Daregada]

> 説明がわかりにくく大変申し訳ございませんが、
説明以前の問題で、提示されたHTMLとJavascriptが、あなたの説明する動作を再現するのには不十分です。たとえば、Javascriptで使われている変数slideLengthはどこで値が設定されているのでしょうか。

見せたくない部分を隠したいのでしょうが、自分で「新たなフォルダーに提示するHTMLとJavascriptの内容でファイルを作成し、実際に動作が再現されるか確認する」ぐらいはやってから質問を書いて下さい。

[knight1220]

早速返信いただきありがとうございます。
大変申し訳ございません。
いろいろ試してごちゃごちゃの状態だったので整理して載せたつもりでしたが、離れたところに記述していたコードが抜けておりました。

＞自分で「新たなフォルダーに提示するHTMLとJavascriptの内容でファイルを作成し、実際に動作が再現されるか確認する」ぐらいはやってから質問を書いて下さい。

おっしゃる通りです今後気を付けます。
コードは修正いたしました。

Answer 1

「質問への追記・修正の依頼」に書いたとおり、こちらで問題を再現できない状態なので情報だけになります。

clearTimeoutの引数に指定するのは、setTimeoutの返り値で得られるタイマーのIDで、setTimeoutの引数に指定した関数ではありません。

WindowOrWorkerGlobalScope.clearTimeout() - Web API | MDN

Comments

[knight1220]

回答いただきありがとうございます。
clearTimeoutの引数が関数ではなくsetTimeoutの返値のIDだったのですね。
勉強不足でした。

まだsetTimeoutの返値の取得方法もわかりませんが、なぜできないのかわからない状態から脱却できましたのでsetTimeoutの返値の取得方法について調べてみます。
ありがとうございました。