ブラウザをフリーズせずにJavaScriptでタイマーループを使用するにはどうすればよいですか？

Question

JavascriptとCSSを使用してブラウザで動的に表示を変更する方法を学習しようとしています。変更を繰り返してみるまで、すべてがうまくいっています。コードは一度起動して正常に動作しますが、ループするときには、すべてのループを試行するとブラウザがフリーズします。私は明らかにJavaScriptには新しく、何か非常に間違っています。ここでは、問題のコードは次のとおりです。

function changes() 
{ 
    var x = 0; 
    do 
    {  
    setTimeout(timerRed, 3000); 
    setTimeout(timerWhite, 6000); 
    setTimeout(timerBlue, 9000); 
    setTimeout(timerBlack, 12000); 
    setTimeout(timerGreen, 18000); 
    setTimeout(timerOrange, 21000); 
    setTimeout(timerClear(x), 24000); 
    } while (x >= 0); 
} 

私は...スペースを節約の利益のためにとCSSの変更が正常に動作しているためtimerRed（）などをスキップします。サイクルの終わりに、私はこれを試してみます：

function timerClear(x) 
    { 
    clearTimeout(x); 
    x = 0; 
    } 

そして、ブラウザをフリーズしてください。では、は、という正しい方法でこれらの関数をループする方法は何ですか。

はあなたに

PSありがとう：つまり、私はブラウザをロックせず、無限ループまたはサイクルに色の機能が欲しいです。

Answer 1

さて、それを得ました！

function changes() 
    { 
    color(); // changes() tests a lot of JavaScript CSS I've been trying out, but color() is the only thing relevant to my question, the rest would just be clutter.  
    } 

    function color() 
    { 
    setTimeout(timerRed, 0000); 
    setTimeout(timerWhite, 3000); 
    setTimeout(timerBlue, 6000); 
    setTimeout(timerBlack, 9000); 
    setTimeout(timerGreen, 12000); 
    setTimeout(timerOrange, 15000); 
    // And I create the infinite loop of color cycling with**out** locking up the browser by having color call itself at the end of every color cycle 
    setTimeout(color, 18000);   
    } 

皆様、ありがとうございます。うまくいけば、これはこの問題に直面する次のJavaScript新参者を助けるでしょう。

Answer 2

do whileループを失います。それらのタイマーのそれぞれをbazillionで作成しています。これらのタイマーは順番に各コールバック関数を数百回発射します。また、ローカル変数xがコールバック内のスコープ内にないことにも注意してください。

Answer 3

私は誤解かもしれませんが、あなたは永遠に発射これらのタイマーを持っているつもりなら、あなたは停止されるまで発射続ける間隔を、使用する必要があります。

function changes() 
{ 
    setInterval(timerRed, 3000); 
    setInterval(timerWhite, 6000); 
    setInterval(timerBlue, 9000); 
    setInterval(timerBlack, 12000); 
    setInterval(timerGreen, 18000); 
    setInterval(timerOrange, 21000); 
} 

あなたはこれらのいずれかを停止する必要がある場合は、このようにそれを作成します。

var redInterval = setInterval(timerRed, 3000); 

...そしてそれを停止する：

clearInterval(redInterval);