javascript - 在特定时间间隔后在 for 循环内执行 setTimeout

Question

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

我正在使用 flapper plugin显示数字。以下是我的片段。

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>

Answer 1

您需要将您的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);