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：在每个迭代器中使用时间延迟？

回答

相关问题