jQuery：在每個迭代器中使用時間延遲？

我正在嘗試創建一個輪換效果，每3秒自動循環顯示每張圖片。jQuery：在每個迭代器中使用時間延遲？

$(".headline_img").each(function(intIndex){ 
     setTimeout($(this).show(),3000); 
    });

超時延遲不起作用。

這會在dom加載後立即顯示所有圖像。這就像它忽略了setTimeout函數。

我錯過了什麼嗎？

注意：我使用$（document）.ready調用它，你認爲這可能會影響它嗎？

來源

2010-10-01 dMix

setTimeout函數採用函數引用或字符串。您的代碼立即爲每個元素調用show方法。我不知道這是否會工作：

$(function() { 
 
    var t = 3000, $debug = $('#result'); 
 
    $(".headline_img").each(function(){ 
 
     var $img = $(this); 
 
     setTimeout($img.show.bind($img), t); 
 
     t += 3000; 
 
    }); 
 
});

.headline_img { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="headline_img">One</div> 
 
<div class="headline_img">Two</div> 
 
<div class="headline_img">Three</div>

但它是值得一試...

來源

2010-10-01 20:21:38

沒有注意到，邁克，好電話。希望@dMix能確認這是否是問題所在。超時仍然需要爲每個元素交錯排列，而不是固定在3000. – jball 2010-10-01 20:40:01

正確。自從我多次被這個特殊問題困擾之後，我的眼睛就轉向了對方。 ;-) – 2010-10-01 20:48:45

'$ .fn.show（）'將會失去它的'this'應該是，對吧？ – alex 2016-03-10 10:34:45

您需要更改每個超時。現在，你同時給所有人附加相同的超時時間。這樣的事情應該沒有太大的改變你的代碼工作：

$(".headline_img").each(function(intIndex){ 
    setTimeout($(this).show(),3000 * (intIndex +1)); 
});

重構使用queue可能是從長遠來看更穩健。

來源

2010-10-01 19:44:58 jball

謝謝，這有助於順序演出節目。但它仍然無延時地立即顯示所有圖像。 – dMix 2010-10-01 19:46:52

當頁面加載並且jQuery不運行時，圖像是否被默認隱藏？你需要在'setTimeout'之前添加一個'$（this）.hide（）;'嗎？ – jball 2010-10-01 19:49:25

是的，他們全部隱藏 – dMix 2010-10-01 19:51:31

或者你也可以使用jQuery的delay功能。

$(".headline_img").each(function(intIndex){ 
    $(this).delay(3 * (intIndex + 1)).show(); 
});

來源

2016-03-10 10:33:37

jQuery：在每個迭代器中使用時間延遲？

回答

相關問題