のJavascriptのsetTimeoutはここ

Question

を実行していない私のhtmlです：

<div class="slider_container Centered"> 
    <figure id="Slider"> 
     <img src="Images/HBC.jpg" id="1" class="effect Image"/> 
     <img src="Images/Easter-Pic.jpg" id="2" class="effect Image"/> 
    </figure> 
</div> 

と私のJavascriptを：

var Figure_Slider; 
var Images; 
var Image_Num; 
var Current_Element; 
var Previous_Element; 

function main() 
{ 
    Figure_Slider = document.getElementById("Slider"); 
    Images = document.getElementById("Slider").children; 
    Image_Num = Images.length; 

    for (var i = 1; i <= Image_Num; i++) 
    { 
     var index = i; 
     Current_Element = document.getElementById(i.toString()); 
     if (index == 1) 
     { 
      Current_Element.classList.add("active"); 
     } 
     else 
     { 
      Previous_Element.classList.remove("active"); 
      Current_Element.classList.add("active"); 
     } 
     window.setTimeout(function(){advance();}, 4000); //This doesn't work 
     advance(); 
    } 
    Current_Element.classList.remove("active"); 
} 

function advance() 
{ 
    Previous_Element = Current_Element; 
} 

window.onload = main; 

私がイメージスライダーを作成しようとしています。 Chromeのデバッグツールを使用して手動でjavascriptを実行すると、正常に動作します。私がちょうどそれをまっすぐに動かすとき、タイマーは実行されません。 setTimeout機能の問題点は何ですか？私はその出力の多くの例が変数に与えられていないことを見てきました。そうではありません。私は匿名の機能修正をしました。 advance();setTimeoutの下のコールはちょうど一時的なので、私はそのロジックを見ることができます。 advance();行がないと、スクリプトは未処理のイベントをドロップします。Previous_Elementには、削除するアクティブな名前のクラスがありません。したがって、タイマー文の両方の部分（遅延と関数の実行）は発生しません。それ以外のコードは正常に動作します。 CSSが必要な場合は教えてください。私は修正のいくつか試してみた：

function wait(delay) 
{ 
    setInterval(advance(), delay); 
} 

を次にループ内でその関数を呼び出すが、それは私のCPUの100％以上を使用してブラウザをロックします。これを行う別の方法がありますか？

ありがとうございます。

Answer 1

ループ/反復は本質的にブロックしていますが、setTimeoutは本質的に非同期/ブロック解除です。 forループに配置するとSetTimeoutが機能しません。 これは正常に動作します！

function wait(fn) { 
    window.setTimeout(function() { fn(); }, 1000); 
} 

for (var i = 1; i <=5; ++i){ 
    /* ... */ 
    wait(advance); 
    /* ... */ 
} 

あなたはいくつかの時間を待ってから実行するのsetTimeoutを使用したい場合は（はい、あなたは質問でそれを言及している必要がある場合）、あなたがこれを使用することができ

function blockUntil(fn,delay){ 
    var until = new Date().getTime() + delay; 
    while(new Date().getTime() < until) {}; 
    fn(); 
} 
for (var i = 0; i < 5; i++) { 
    blockUntil(advance,1000); 
}; 

Answer 2

問題の一部setTimeout（）関数は2回呼び出されますが、ほとんど同じ時刻に呼び出されます。 forループが2つのイメージのリストを2回反復するのに時間がほとんどかからないので、setTimeout（）はほぼ同じ時刻に呼び出されます。それは一度呼び出されたように見える。 setTimeoutの前の行にconsole.logを入れ、setTimeoutの中に別のコンソールログを記録してみてください。このSOの質問/回答でもうまく説明されています：setTimeout in for-loop does not print consecutive values

Answer 3

setTimeout関数をIIFEのクロージャでラップしてください。

for (var i = 1; i <= 3; i++) 
{ 
    (function(idx) 
    { 
     setTimeout(function() { alert(idx); }, i * 500); 
    })(i); 
} 

希望すると助かります。

Answer 4

期待どおりに動作します。私のバイオリンのデモをご確認くださいhttps://jsfiddle.net/jrsucfc4/1

function advance(param) { 
    advanceCallCount++; 
    console.log('advanceCallCount = ' + advanceCallCount+ '; advance param: ' + param); 

Previous_Element = Current_Element; 

}

あなたはこの実行の結果として取得するために何を期待しますされ、他の事？

Answer 5

この文書では、setTimoutとsetIntervalの仕組みについて忘れました。このコマンドが実行されると、タイマーが起動し、コードが続くが続きます。タイマーが終了すると、THEN内部機能が実行されます。プログラムは、内部関数が実行されるまで一時停止しません。私のロジックは、setIntervalを使用するように変更されており、それは私の主な機能のコードの最後の行です。 setTimoutとsetIntervalのドキュメントには、この重要な情報が含まれているはずです。ここに私のメインはどうなっているのですか

function main() 
{ 
    Figure_Slider = document.getElementById("Slider"); 
    Images = document.getElementById("Slider").children; 
    Caption = document.getElementById("Caption"); 
    Image_Num = Images.length; 
    Image_Counter = 1; 

    Current_Element = document.getElementById(Image_Counter.toString()); 
    Current_Element.classList.add("active"); 
    Caption.innerHTML = Current_Element.alt; 

    window.setInterval(function(){image_slider();}, 5000); 
} 

どうもありがとうございました。