Question

我正在尝试使用JQuery迭代一些＆lt; li＆gt;使用计时器的对象，即 - 每5秒，我想访问下一个＆lt; li＆gt;我的＆lt; ul＆gt;的对象。

我知道您可以使用.each函数进行迭代，但是我无法将计时器与它集成以逐个迭代每个函数。

我尝试了以下操作，但它无法正常工作。它一直给我最后的LI元素。我假设这是因为setTimeout不是顺序的。

$("#div_image_thumb ul li").each(function(){    
  var myLIobj = $(this);
  setTimeout(function(){doThis(myLIobj);}, 5000);
});

Answer 1

John Fishers的方法看起来不错。但是如果你想坚持使用jQuery的每个，这是非常优雅的，试试这个（根据JasonWoof的提示将超时设置为5s，10s等）：

$("#div_image_thumb ul li").each(function (i) {
    var $li = $(this);
    setTimeout(function () { doThis($li); }, 5000 * (i + 1));
});

Answer 2

这样的事情应该正常运作：

var elements = $("#div_image_thumb ul li");
var index = 0;

var doNext = null;
doNext = function() {
  var element = elements.eq(index);
  // do work 
  if (index < elements.length) {
    index++;
    setTimeout(doNext, 5000);
  }
}

Answer 3

根据您对已接受答案的评论 - 您希望继续循环遍历元素集合，为此您可以使用setInterval和一些帮助函数

$(function() {
  var $lis = $("#div_image_thumb ul li");
  var index = 0;

  // setup a function to show the current one and increase the index
  var doNext = function() { 
    // assuming doThis is defined somewhere else.
    doThis($lis.eq(index));
    // increment the index - if it is beyond the number of li's - reset it to 0
    if (++index >= $lis.length) index = 0;
  };

  // call it once as we load
  doNext();
  // set it up to be called every 5000 ms
  setInterval(doNext, 5000);
});

Answer 4

我认为你的代码存在问题，就是你要设置许多计时器同时到期（从现在起5秒）

所以你需要设置一个定时器，从现在起5秒钟，然后触发下一个5秒定时器，或者你需要设置一堆定时器不同的时间，例如设置为5s，10s，15s， 20多岁等

Answer 5

我发现这是一个非常有用的项目。虽然我知道这是较旧的，但我发现这个花絮有助于构建一个我可以用于不同项目集的函数。我在页面上有几个画廊，我希望能够全面使用它。在Gnarf的出色回复旁边，我不确定这是否是多余的。也许我吮吸javascripts。我决定需要一个参数并根据ECSMA2015标准设置该参数的默认值，因此这适用于旧版本。

这个实用程序是我可以在我的js init期间初始化它并根据我可能在的页面提供任何东西，允许我轻松地循环遍历不同的对象。

     function gallery($lis) {
  $lis = typeof a !== 'undefined' ? $lis : $("#div_image_thumb ul li");
  var index = 0;

  // setup a function to show the current one and increase the index
  var doNext = function() {
    // assuming doThis is defined somewhere else.
    doThis($lis.eq(index));
    // increment the index - if it is beyond the number of li's - reset it to 0
    if (++index >= $lis.length) index = 0;
  };

  // call it once as we load
  doNext();
  // set it up to be called every 5000 ms
  setInterval(doNext, 5000);
};

使用JQuery通过计时器迭代元素

5 个答案: