【JavaScript】画像を一致時間で切り替えた後ループしない方法を探しています

Question

2つの画像があり、1枚目の画像を6秒後に2枚目の画像へ切り替えた後、
繰り返さないコードを書きたいのですが、
現在下記のコードだと繰り返してしまいます。
繰り返さないコードにするためにはどのようなコードを記述したらいいでしょうか？

<img id="mypic" src="images/test01.jpg" class="">
          <script>
            var pics_src = new Array("images/test01.jpg","images/test02.jpg");
            var num = -1;
 
            slideshow_timer();
 
            function slideshow_timer(){
                if (num == 1){
                    num = 0;
                } 
                else {
                    num ++;
                }
                document.getElementById("mypic").src=pics_src[num];
                setTimeout("slideshow_timer()",6000); 
            }

      	</script>

Comments

[maisumakun]

・JavaではなくJavaScriptです。両者は別の言語です。
・書いているコードの意味を理解しようとはしていますか？

[m.ts10806]

コードはマークダウンのcodeにてご提示ください

[ku__ra__ge]

`var pics_src = new Array("images/test01.jpg,"images/test02.jpg");`の行の文字列が閉じられていないため文法エラーになります。問題と関係ないエラーが出ないよう、質問のコードを修正してください。

[daichi_2021]

ご指摘ありがとうございます。
コードを修正しました。

Answer 1

繰り返さないコードにするためにはどのようなコードを記述したらいいでしょうか？

1枚目の画像に切り替えた後にだけsetTimeoutを呼ぶようにすれば、2枚目に切り替えた後に画像が切り替わる処理は実行されません。

if (num < 1) {
    setTimeout("slideshow_timer()",6000);
}

Comments

[daichi_2021]

ご回答いただきありがとうございます。
いただいたコードを入れて無事に繰り返しの処理を止めることが出来ました！

Answer 2

セットしたタイマーをクリア
clearTimeout()

Comments

[daichi_2021]

ご回答いただきありがとうございました！