javascript w/jquery loop

Question

私のコードに問題があります。私はループを作ってループを作り、クラスを追加したり、色を変えたりする必要があります。私はforと試してみましたが、それではsetintervalを使ってループのようなものを試してみましたが、うまくいっていますが、まだ動作していないものがあります。 2は、それから3などではなく1 1によるおかげ

function runp(patron){ 
    var x = 0; 
    var intervalID = setInterval(function() { 
    $("#container"+patron[x]).toggle(1).delay(1000).toggle(1).delay(1000); 
    if (++x === 20) { 
     window.clearInterval(intervalID); 
    } 
    }, 2000); 
} 

これは私が持っているものです：https://jsfiddle.net/dt8kxebg/ 、これはイムを複製しようとしているものです：https://jsfiddle.net/jf0opams/

Answer 1

私はあなたの問題はあなたが実行していることだと思いますforループの内部にあるので、runp（）は何度も繰り返します。 patron[]配列に乱数（1〜4）が入っているときに、ループの後に関数を1回だけ呼び出す必要があります。

forループは超高速（数ミリ秒）で、配列に20個の乱数を埋め込むため、問題が発生します。したがって、アニメーション/トグル機能を20回呼び出されました。このオン/オフ動作には2秒かかり、ほぼ同時に20回発生します。私のコードでは、ブラウザのコンソールでconsole.log()の出力がよりよく動作を理解することがわかります。

function start(patron, patronl){  
    while (patron.length<20){ 
    patron.push(rand(1,4)); 
    console.log('start: '+patron.length); 
    //runp(patron, patron.length);//old place 
    //readp(patron,// 
    } 
    runp(patron);//new place 
} 

function runp(patron, iteration){ 
    var x = 0; 
    var intervalID = setInterval(function() { 
    $("#container"+patron[x]).toggle(1).delay(1000).toggle(1).delay(1000); 

    //see how 20 outputs come at once, if runp() is inside for loop 
    console.log('togglewait: '+x, 'start: '+iteration);  

    if (++x === 20) { 
     window.clearInterval(intervalID); 
    } 
    }, 2000); 
}