按特定时间间隔执行for循环内的setTimeout

Question

我想循环一些数字，即每次迭代循环应在特定时间段后执行，例如，第一次迭代应在第一秒执行，下一次应在2秒后执行，依此类推...

我正在使用flapper插件来显示这些数字。以下是我的片段。

var $lucky = $('.lucky');
$lucky.flapper({
  width: 1,
  chars_preset: 'alpha',
  align: 'right',
  timing: 1000,
  min_timing: 100,
  threshhold: 100,
  animation: 'slow',
  //transform: true,
});

$(document).ready(function() {
  var numbers = ['G', '1', '2', '3', '4', '5', '6'];
  var length = numbers.length;
  for (var i = 0; i < length; i++) {
    console.log(numbers[i]);
    var $lucky = $('#lucky' + [i]);
    setTimeout(function() {
      var $lucky = $('#lucky' + [i]);
      var num = numbers[i];
      $lucky.val(num).change();
    }, 500);
    console.log(i);
  }
});

.header {
  display: inline-block;
}

<div class="container-fluid">
  <input class="header light XXL lucky" id="lucky0" />
  <input class="header light XXL lucky" id="lucky1" />
  <input class="header light XXL lucky" id="lucky2" />
  <input class="header light XXL lucky" id="lucky3" />
  <input class="header light XXL lucky" id="lucky4" />
  <input class="header light XXL lucky" id="lucky5" />
  <input class="header light XXL lucky" id="lucky6" />
</div>

- Rakesh

---

使用不同的超时值设置setTimeout函数 - Tommy

@Tommy，怎么做呢？非常需要帮助。 - Rakesh

Answer 1

您可以删除循环并使用setInterval()来实现循环效果。

var $lucky = $('.lucky');
$lucky.flapper({
  width: 1,
  chars_preset: 'alpha',
  align: 'right',
  timing: 1000,
  min_timing: 100,
  threshhold: 100,
  animation: 'slow',
  //transform: true,
});

$(document).ready(function() {
  var numbers = ['G', '1', '2', '3', '4', '5', '6'];
  var i = 0;
  var length = numbers.length;
  var inteval = setInterval(function() {
    var num = numbers[i];
    $('#lucky' + i).val(num).change();
    if (++i >= length)
      clearInterval(inteval);
  }, 1000);
});

.header {
  display: inline-block;
}

<link href="http://www.jaykayess.com/flapper/css/flapper.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.jaykayess.com/flapper/src/jquery.flapper.js"></script>
<div class="container-fluid">
  <input class="header light XXL lucky" id="lucky0" />
  <input class="header light XXL lucky" id="lucky1" />
  <input class="header light XXL lucky" id="lucky2" />
  <input class="header light XXL lucky" id="lucky3" />
  <input class="header light XXL lucky" id="lucky4" />
  <input class="header light XXL lucky" id="lucky5" />
  <input class="header light XXL lucky" id="lucky6" />
</div>

- rrk

Answer 2

你需要将setTimeout包装在IIFE中。这是因为setTimeout是异步运行的。当它在指定时间即500毫秒后准备执行时，循环已经结束了。

这是你代码的修改版。

$(document).ready(function() {
    var numbers = ['G', '1', '2', '3', '4', '5', '6'];
    var length = numbers.length;
    for (var i = 0; i < length; i++) {
        (function(i){
            console.log(numbers[i]);
            var $lucky = $('#lucky' + [i]);
            setTimeout(function() {
                var $lucky = $('#lucky' + [i]);
                var num = numbers[i];
                $lucky.val(num).change();
            }, (1000 * i));
        })(i);
    }
});

在那个IIFE中包装超时会捕获每次迭代中的 i 值。

(function(i){
    // loop will execute whatever inside 
    // with a new value of i in each iteration....
})(i);

- Rohit416

Answer 3

你可以使用一个立即调用的函数表达式，并在超时后调用它自身。在每次迭代中，数组索引递增1，直到等于数组的长度为止。

$(function() {
  
  var numbers = ['G', '1', '2', '3', '4', '5', '6'],
      length = numbers.length,
      index = -1,
      interval = 500;
    
  (function next(){
      index++;
      if(index<length){
         console.log(numbers[index]);
         $('#lucky' + index).val(numbers[index]).change();
         setTimeout(next,interval);
      }
  })();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <input class="header light XXL lucky" id="lucky0" />
  <input class="header light XXL lucky" id="lucky1" />
  <input class="header light XXL lucky" id="lucky2" />
  <input class="header light XXL lucky" id="lucky3" />
  <input class="header light XXL lucky" id="lucky4" />
  <input class="header light XXL lucky" id="lucky5" />
  <input class="header light XXL lucky" id="lucky6" />
</div>

- Moob

Answer 4

您可以使用变量替换setTimeout中的值500。 setTimeout以毫秒为单位计时，因此您需要将数字（2、3、4等）乘以1000以获取以秒为单位的时间。

var timeout = 0;
if(numbers[i] != 'G'){
    timeout = numbers[i] * 1000;
}
else{
    //set timeout for 'G'
}
setTimeout(function() {
  var $lucky = $('#lucky' + [i]);
  var num = numbers[i];
  $lucky.val(num).change();
}, timeout);

- dimlucas

Answer 5

试一下这个。

function yourFunction() {
    console.log('Hello');
}

timeIntervals = [1000,2000,3000,4000,5000];
$.each(timeIntervals,function(k,startAfter) {
setTimeout(yourFunction, startAfter);
});

- phreakv6