Question

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

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

＆＃13;

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);
  }
});

＆＃13;

.header {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

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>

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);

Answer 3

您可以使用变量替换setTimeout中的值500。 setTimeout计算时间（以毫秒为单位），因此您需要将数字（2,3,4，e.t.c）乘以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);

Answer 4

试试这个。

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

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

Answer 5

你可以使用Immediately Invoked Function Expression并在超时后让它自己调用。在每次迭代中，数组索引递增1，直到它等于数组的长度。

＆＃13;

$(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);
      }
  })();
  
});

＆＃13;

<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>

＆＃13;

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

5 个答案: