forループ内のSetTimeout

Question

私は3つの画像のz-インデックスを変更するスクリプトを書こうとしています。基本的には、スクリプトは現在のイメージをターゲットにし、次のイメージに、より高いZインデックスを適用する必要があります。たとえば、カルーセルのようなものですが、アクティブなクラスではなくZインデックスを使用します。課題は、特定の間隔の後にz-インデックスを設定することです。問題は、最初の画像が表示され、最後の画像が表示されることです。これは私のコードです：

HTML：私はわからないループ内の閉鎖といくつかの問題があると思いますが、

<div class="changingimages"> 
    <img src="#" data-time="3000" width="100%" class="alternateimage alternateimage1"> 
    <img src="#" data-time="2000" width="100%" class="alternateimage alternateimage2"> 
    <img src="#" data-time="4000" width="100%" class="alternateimage alternateimage3"> 
</div> 

jQueryのスクリプト

<script type="text/javascript"> 

jQuery(document).ready(function(){ 

    var changeImg = function(i, time, currentImg) { 

     setTimeout(function(){ 

      jQuery(currentImg).next().css("z-index", i); 

     }, time); 
    }; 

    var numberOfChilds = jQuery(".changingimages").children().length; 
    var currentIndexClass; 
    var currentImg; 
    var time; 

    for (var i=1; i<=numberOfChilds; i++) { 

      currentIndexClass = '.alternateimage' + i; 
      currentImg = jQuery(currentIndexClass); 
      time = jQuery(currentIndexClass).attr("data-time"); 

      changeImg(i, time, currentImg); 

    } 

}); 

！

Answer 1

setTimeoutは、以前にキューに入れられたイベントに対して相対的にイベントを実行するようにスケジューリングするのがよくある誤解です。

setTimeout(f, 100); 
setTimeout(g, 100); 
setTimeout(h, 100); 

は、このようなタイムラインにつながる：あなたは、理論的には、以下のことを信じているように見えます

0ms Start 
100ms Run f() 
200ms Run g() 
300ms Run h() 

現実はsetTimeoutの時間オプションがでた後、この機能を実行する」を意味していることです少なくともこの多くの時間は過ぎました。前の例のオフに行く、あなたは実際には、正しくスペースアウトあなたのコードをするために、より

0ms Start 
100ms Run f() 
101ms Run g() 
102ms Run h() 

のようなものを取得し、それを置き換えるのではなく、タイムアウト時間に加算し続けるだろう。

var time = 0; 

for (var i = 1; i <= numberOfChilds; i++) { 
    currentIndexClass = '.alternateimage' + i; 
    currentImg = jQuery(currentIndexClass); 

    // Add to the previous time 
    time += parseInt(jQuery(currentIndexClass).attr("data-time"), 10); 
    changeImg(i, time, currentImg); 
} 

Answer 2

ここでは、あなたが望むものを達成するためにタイムアウトの使用を実装しているフィドルです。

fiddle

.textArea { 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    display: block; 
} 

.box_a { 
    background-color: blue; 
} 

.box_b { 
    background-color: red; 
} 

.box_c { 
    background-color: orange; 
} 

.active { 
    z-index: 3; 
} 


<div class="textArea box_a active">a</div> 
<div class="textArea box_b">b</div> 
<div class="textArea box_c">c</div> 

$(function(){ 
    var $elem = $('.textArea'); 

    timeout(0); 

    function timeout(i){ 
    $($elem[i]).addClass('active'); 
    return setTimeout(function(){ 
     $elem.removeClass('active'); 
     i++; 
     if(i >= $elem.length){ 
     i = 0 
     } 
     timeout(i); 
    }, 1000) 
    } 
}); 

タイムアウトが非同期で順次実行しないので、それは、forループを使用しません。各タイムアウトは基本的に同時に起動し、待機時間に基づいてアクションを実行します。

解決策は、インデックスを追跡し、最後のタイムアウトが実行を完了したときに機能することです。