Question

我不明白为什么这个函数按照预期的顺序输出1-5，但是以1秒的间隔而不是1,2,3等秒。我不熟悉setTimeout函数，我理解这里函数的参数正在发生，我没有看到。

var counter = function() {
   for (var i = 1; i <= 5; i++) {
     (function(x){
       setTimeout(function timer() {
           console.log(x);
       }, (x * 1000));
     })(i);
   }
 };

Answer 1

你可以通过递归调用来避免for循环，只需传递开始和停止索引。

var counter = function (x, y) {
    setTimeout(function timer() {
        console.log(x);
        if (x != y) counter((x + 1),y);
    }, (x * 1000));
};

counter(1, 5);

<强> Fiddle demo

Answer 2

因为您立即将所有电话都拨打到setTimeout。因此，在同一事件中，JS收到调用timer的指令：1000ms后，2000ms后，3000ms后，4000ms后和5000ms后。这正是它的作用，因此每1秒调用timer。

如果您希望逐步增加间隔，则应将循环重写为递归循环，其中setTimeout的下一次调用由timer执行。

Answer 3

正如@putvande所说，你是在不同的时间间隔内同时设置所有5个超时。

var counter = function(){
   for (var i=1; i<=5; i++) {
     console.log('setting timer for ' + i);
     (function(x){
         setTimeout( function timer(){
         console.log(x);
     }, (x*1000) );
     })(i);
   }
 };

counter();

额外的日志声明显示了这一点。你的计时器以正确的间隔射击，第一次是1秒，第二次是2秒，等等。

JavaScript中的setTimeout函数不会以正确的时间间隔输出数字

3 个答案: