foreachループ内でsetTimeout関数を中断する

Question

ページのロード時に開始されるsetTimeout関数を中断しようとしています。私がここでやっていることは、ボタンをクリックすると、フラグの値をtrueにして、setTimeoutが壊れていて、ここでは起こっていないということです。 このsetTimeout関数は、各ループの内部にあります。以下は私のコードです。

   rData[0].dt.forEach(function(d, i) { 
        setTimeout(function() { 
         if(flag === "false"){ 
          console.log(flag); 
          reserRadius(i); //here I am changing radius of circle 
         }else{ 
          console.log(flag); 
          clearTimeout(); 
          return; 
         } 

        }, i * 2000); 
       }); 

Answer 1

すべてのタイムアウトを一度に作成するのではなく、必要なときにのみ作成してください。この方法で、あなたが停止することを決定したとき、それらのいずれかをクリアする必要はありません。コードのバージョンで

(function repeat(list, i) { 
    if (i >= list.length) return; // nothing (more) to do 
    var d = list[i]; // do you need d at all?? 
    setTimeout(function() { 
     if(flag === "false"){ 
      console.log(flag); 
      reserRadius(i); //here I am changing radius of circle 
      repeat(list, i+1); // schedule next timeout only now. 
     }else{ 
      console.log(flag); 
      // Don't schedule next timeout. This breaks the "loop". 
     } 
    }, 2000); // trigger 2 seconds from now. Note: no multiplying anymore. 
})(rData[0].dt, 0); // pass initial values: the array and index. 

を、あなたはすべてのsetTimeoutの呼び出しによって返さID値を保持しなければならない、とそれらをすべて（または少なくとも残りのもので）に1つずつ渡します。これはあなたのコードをかなり面倒にするでしょう。私は上記がより効率的なアプローチだと思う。

Answer 2

setTimeoutをコールバック自体から停止することはできません。 setTimeout は、clearTimeoutに渡すことができるtimeoutIdを返します。これにより、 は、その特定のタイマーを停止します。

このようなタイマーをすべて停止する1つの方法は、timeoutIdsの配列を作成し、次のように変更することです。

var timerIds = []; 
rData[0].dt.forEach(function(d, i) { 
    timerIds.push(setTimeout(function(){ 
     if(flag === "false"){ 
      console.log(flag); 
      reserRadius(i); //here I am changing radius of circle 
     } 
     else{ 
      console.log(flag); 
     } 
    }, i * 2000)); 
}); 

function stopTimeouts(){ 
    timerIds.forEach(function(id){ 
     clearTimeout(id); 
    } 
} 
function codeThatMightChangeFlag(callback) { 
    // do a bunch of stuff 
    if (condition happens to change flag value) { 
     // call the callback to notify other code 
     stopTimeouts(); 
    } 
} 

参照してください：Clear array of setTimeout'sとJavascript - wait until flag=true