setTimeoutをクリックで停止したい

Question

前提・実現したいこと

setTimeoutを使って画像を６枚繰り返して、画面をクリックするとそのタイミングの画像で止まるようにしたいです

発生している問題・エラーメッセージ

setTimeoutを使って画像を６枚繰り返して、画面をクリックするとそのタイミングの画像で止まるようにしたいのですが、やり方がわかりません。プログラミング初心者です。回答よろしくお願いいたします。

エラーメッセージ

該当のソースコード

ソースコード
```<img src="ita.gif" name="sushi" />

<script type="text/javascript">
  img = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg"); //*1
  count = -1; //*2
  imgTimer();

  function imgTimer() {
  	//画像番号
  	count++; //*3
  	//画像の枚数確認
  	if (count == img.length) count = 0; //*4
  	//画像出力
  	document.sushi.src = img[count]; //*5
  	//次のタイマー呼びだし
  setTimeout("imgTimer()",100);
    

    
    

  


  
  
 
 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
  }
</script>

### 試したこと
ifを使ってやってみたのですが、動きませんでした。
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

setTimeoutはidを返します。そのidをclearTimeoutの引数に渡して遅延処理を取り消すことができます。

Comments

[tarakotarako]

itagagaki様、回答していただきありがとうございます、始めて３日の初心者なので理解することが難しいです。
「遅延処理を取り消す」とはどのようなことなのでしょうか、また、どのような構文が使われるのでしょうか。回答していただいた上に重ねて質問、申し訳ございません。

[itagagaki]

setTimeout(関数, 時間) は、「関数」を「時間」だけ後で（遅延して）実行する処理です。
tarakotarakoさんのコードは、imgTimerが実行されたとき、やりたいことをやった後で、setTimeout(imgTimer, 100)で100ミリ秒後にまたimgTimerを実行させる仕掛けをしていますね。
それでは永遠に止まらないので、止めるにはsetTimeoutによる遅延実行の仕掛けをキャンセルする必要があります。そのキャンセルを行うのがclearTimeoutです。

ひとつのやり方として、今のコードから発展させるとしたら、まず、グローバル変数
let imgTimerId = null;
を定義しておき、
setTimeout("imgTimer()",100);
のところを
imgTimerId = setTimeout("imgTimer()",100);
にします。これで、setTimeoutによる「仕掛け」をしているとき imgTimerId がその仕掛けのidを保持していることになります。
そして、止めたいときには、たとえば
function stop()
{
if (imgTimerId !== null) {
clearTimeout(imgTimerId);
}
}
を実行すればその仕掛けを止められることになります。

クリックイベントハンドラでこのstopを呼べばいいことになります。
クリックイベントハンドラの作り方はわかりますか？