Question

我需要知道，如何为我选择的每个元素运行一个函数。这是我的jQuery代码：

$(function() {
  $(".line").each(function() {
    var dot = $(this).find('.dot');
    setTimeout(function () {
      moveDot(dot);
    }, 250);
  });
});

它可以为每个元素运行moveDot()（每隔250ms），但现在，所有元素都在同一时间开始。这是JSFIDDLE。

Answer 1

使用索引：

$(".line").each(function(i) {
   var dot = $(this).find('.dot');
   setTimeout(function () {
     moveDot(dot);
   }, ++i * 250);
});

http://jsfiddle.net/d59c7/

Answer 2

与每个index

相乘

$(".line").each(function(i) {
   var dot = $(this).find('.dot');
   setTimeout(function () {
     moveDot(dot);
   }, 250 * i+1);
});

DEMO

Answer 3

尝试将index传递给setTimeout()。它会为循环中的每个元素递增，从而增加延迟。

$(function() {
  $(".line").each(function(index) {
    var dot = $(this).find('.dot');
    setTimeout(function () {
      moveDot(dot);
    }, index * 250);
  });
});

<强> Fiddle

Answer 4

您可以使用随机函数javascript

(function() {
  $(".line").each(function() {
    var x = Math.floor((Math.random() * 250) + 1);
    var dot = $(this).find('.dot');
    setTimeout(function () {
      moveDot(dot);
    }, x);
  });
});

Answer 5

我更喜欢这样作为解决方案之一：

 function moveDot(elm,index) {
  elm.animate({left: '370px'}, {duration: 3000*index, queue: false, done: function() {
  elm.animate({left: '0px'}, {duration: 3000*index, queue: false, done: function() {
  moveDot(elm,index)
    }});
  }}); 
 }

  $(function() {
   $(".line").each(function(i) {
   var dot = $(this).find('.dot');
   setTimeout(function () {
     moveDot(dot,++i);
   }, 250);
  });
  });

如何在不同的时间内为每个元素运行函数？

5 个答案: