javascript - このループで何が問題になっていますか？ループを終了しません

Question

私はJSFiddleを作成したいのですが、コードがあなたのタブ/ウィンドウをクラッシュします...このwhileループで何が問題になっていますか？それは私に見えます...

var commentLoop = 150; 
    var whileLoop = true; 
    var count = 0; 

    while (whileLoop === true) { 
     setInterval(function() { 
      console.log("my regular code goes here"); 
      if (count == commentLoop - 1) { 
       console.log("just entered while loop thing"); 
       whileLoop = false; 
      } 
      count++; 
     }, 500); 
    } 

私は何が欠けていますか？助けてくれてありがとう。

Answer 1

JavaScriptはシングルスレッドでイベント駆動型なので、whileループが実行されている限り、setInterval()は決して起動できず、そのコールバックは決して呼び出されません。だからあなたはwhileループがちょうど永遠に走るデッドロックがあります。 JavaScriptをイベントドリブン自然と

、setInterval()はイベントキューにイベントを置きますが、あなたのwhileループの実行が停止することはありませんので、インタプリタは、それが実際にJSの現在の実行スレッドを終えることができるポイントに到達したことがないとイベント・キューから次のイベントを取り出して、タイマー・コールバックを実行します。

whileループを使用して、他のイベントが発生するのを待つことはできません。 Javascriptでは、whileループ自体が実行されるまで、もう1つのイベントは発生しません。代わりに、タイマーだけを使用し、whileループは使用しないでください。あなたが解決しようとしている真の問題をもう少し明確に説明できれば、コーディングの解決法を提案することができます。

ここに間違っているものを追加するには、whileループを使用するたびに新しいsetInterval()タイマーを作成しています（つまり、数多くのタイマーがアクティブになるので積み重ねられます）。

あなたは達成しようとしていることを正確には言いませんが、whileループではなく、インターバルタイマーだけを使用できるようです。だから、いくつかの操作を150回実行するためにあなたの希望を想定し、500msの間隔を空け、あなたがこれを使用することもできます。これは効用関数に行くことができる、

var count = 0; 
var commentLoop = 150; 
var timer = setInterval(function() { 

    // regular code here 

    // check if we're done repeating 
    if (count === commentLoop - 1) { 
     // stop the timer 
     clearInterval(timer); 
    } else { 
     count++; 
    } 

}, 500); 

するか、（あなたはそれを動作確認するには、このスニペットを実行することができます）：

を

function repeat(numTimes, delay, fn) { 
 
    var cntr = 0; 
 
    var timer = setInterval(function() { 
 
     if (cntr >= numTimes) { 
 
      clearInterval(timer); 
 
     } else { 
 
      // if callback returns true, then stop the timer 
 
      if (fn(cntr) === true) { 
 
       clearInterval(timer); 
 
      } 
 
      ++cntr; 
 
     } 
 
    }, delay); 
 
} 
 

 
// sample usage 
 
repeat(5, 400, function(cnt) { 
 
    console.log(cnt); 
 
});