for循環中的SetTimeout

我正在嘗試編寫一個腳本來更改3個圖像的z-index。基本上，腳本應該針對當前圖像，並在下一張圖像上應用更高的z-index，就像一種旋轉木馬，但使用z-index而不是活動類。面臨的挑戰是在特定時間間隔後設置z-索引。問題是第一個圖像顯示，然後是最後一個。這是我的代碼：for循環中的SetTimeout

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); 

    } 

});

我認爲有一些問題，在一個循環中關閉，但不知道！

來源

2016-10-13 M. Simon

*您遇到什麼*問題？什麼不行？ – Bergi

到'setTimeout'的回調觸發時，'i'將是最大值。 –

@DavinTryon：不，看看代碼更接近一點。 –

這是一個常見的誤解，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); 
}

來源

2016-10-13 16:48:39

要添加它們，您可能必須先將它們投射到數字 – Bergi

@Bergi True。糾正。 –

太棒了！它的工作;） –

這是一個小提琴實現使用超時來實現你想要的。

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循環，因爲超時是異步的，不會按順序執行。基本上每個超時都會同時觸發，然後根據等待時間執行他們的操作。

解決方案是創建一個函數，用於跟蹤索引以及上次超時何時完成執行。

來源

2016-10-13 17:11:48 Gabs00

好腳本。我會嘗試這一個。謝謝：） –

for循環中的SetTimeout

回答

相關問題