jQuery: 如何在 Each 迭代器中使用时间延迟？

Question

我正在尝试创建一个轮播效果，每隔3秒自动循环浏览每张图片。

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

超时延迟不起作用。

这会在dom加载完成后立即显示所有图像。就好像它忽略了setTimeout函数一样。

我错过了什么吗？

注意：我是使用$(document).ready调用的，你认为这可能会影响它吗？

- kush

Answer 1

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>

但这也值得一试...

- Heretic Monkey

---

都没有注意到，Mike说得好。希望@dMix能够确认是否是这个问题。超时仍然需要为每个元素分别设置，而不是固定在3000。 - jball

没错。我的眼睛直接看向括号，因为我已经被这个特定的问题咬了很多次。;-) - Heretic Monkey

$.fn.show() 会失去它应该有的 this，对吗？ - alex

哇，过去的回忆 :). 它不会失去对 this 的追踪，因为我们正在传递一个已绑定到 $(this) 的函数的引用。我已经更新了代码以使其更清晰，尽管 bind() 不是必需的。不过这是个好问题！ - Heretic Monkey

Answer 2

您需要针对每个操作更改超时时间。目前，您将相同的超时时间同时附加到所有操作上。使用以下类似代码可以在不大幅更改代码的情况下解决问题：

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

重构以使用queue可能更长远地增强韧性。

- jball

---

谢谢，这有助于按顺序分阶段展示演出。但是它仍然一次性显示所有图像，没有时间延迟。 - kush

页面加载时，图片是否默认隐藏且jQuery未运行？在setTimeout之前需要添加$(this).hide();吗？ - jball

Answer 3

或者你可以使用jQuery的delay函数。

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

- Leysam Rosario