javascript - setTimeOut は適切な遅延時間を待っていません

Question

再生と停止の2つのボタンがあります。再生をクリックすると、画像がスライドショーのように表示されます。私は使用してsetTimeout()おり、実行する前に5秒間待機しています。

再生をクリックすると、コードは正常に実行され、5 秒間待機してから次の画像が表示されますが、停止をクリックしてからもう一度再生をクリックすると、正しい間隔で待機が停止します。実行する前に 5 秒間待機する代わりに、最初の 2 つの画像を 1 秒間待機し、次の 2 つの画像を 5 秒間待機し、次の 2 つの画像を 1 秒間待機します。

最初は正しく実行され、再試行時に中断するのはなぜですか?

コード：

var stop = false;
playClickfunction() {
    showImages();
}
showImages() {
    //code to display image for all no of images
    //and user can stop on any no of image..
    if(!stop)
       setTimeout(showImages, 5000);
}

stopClickfunction() {
   stop = true;
}

Answer 1

停止時にタイムアウトをクリアする必要があります。

多分そのようなことを試してください：

var timer = false;

playClickfunction()
{
    showImages();
}

showImages()
{

    //code to display image for all no of images
    //and user can stop on any no of image..
    if(!stop)
       timer = setTimeout(showImages, 5000);
}

stopClickfunction()
{

   clearTimeout( timer )
}

Answer 2

フラグ変数よりも適切な方法を使用してみてください

var timer = setTimeout(showImages, 5000);
clearTimeout(timer);

Answer 3

[停止] をクリックし、5 秒が経過する前にもう一度 [開始] をクリックすると、最初のタイムアウトが実行され続けます。あなたがする必要があるのは、画像を停止するだけでなく、開始がクリックされるたびに、タイムアウトをクリアすることです。

var timeout;

function start() {
    stop();
    showImages();
  }
}

function stop() {

  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
}

function showImages() {
  // do stuff, then
  timeout = setTimeout(showImages, 5000);
}

あるいは、開始がクリックされ、タイムアウトが設定されている場合は、タイマーがすでに実行されているため、クリックを無視してください。その場合、次のようにします。

function start() {
  if (!timeout) {
    showImages();
  }
}

Answer 4

そのためにメソッド clearTimeOut() を使用する必要があります