Question

var result = 0;

for (var i=0; i < 3; i++) {
  setTimeout(function() {
    result += i;
  }, 1000);
}

为什么结果将等于9而不是3？

Answer 1

之所以得到9，是因为要将jQuery(window).bind('scroll', function() { let wpbgHeight = jQuery('.wpgb-layout').outerHeight(); let wpbgTopOffset = jQuery('.wpgb-layout').offset().top; let innerHeight = window.innerHeight; if(jQuery(window).scrollTop() >= wpbgHeight + wpbgTopOffset - window.innerHeight) { jQuery('.wp-filter').fadeOut(); } if(jQuery(window).scrollTop() <= 0.5*wpbgHeight + wpbgTopOffset - window.innerHeight) { jQuery('.wp-filter').fadeIn(); } });添加到循环计数器result，并且每次循环迭代时，两个数字都会增加。如果只希望最终答案为3，则根本不需要i，只需在循环的最终迭代时报告循环计数器的值即可。

目前尚不清楚您的目标是什么，但是很多时候人们认为计时器是希望重复执行某项操作的循环。计时器可以做到这一点，而没有任何循环通过result计时器或递归setInterval()计时器来帮助它。两种方法如下所示：

递归setTimeout（）计时器：

setTimeout()

setInterval（）计时器：

var result = 0;

function timerCallback(){
  if(result < 3){
    console.log(++result);
    // A second timer is embedded in the
    // first timer's callback function.
    // This second timer calls the current
    // function, setting up a looping flow.
    setTimeout(timerCallback, 1000);
  }
}

// Start a one time timer
setTimeout(timerCallback, 1000);

Answer 2

当你写

var result = 0;

for (var i=0; i < 3; i++) {
  setTimeout(function() {
    result += i;
  }, 1000);
}

由于javascript变量被吊起

var result = 0;
var i;

for (i=0; i < 3; i++) {
  setTimeout(function() {
    result += i;
  }, 1000);
}

var i移到顶部。

并且由于javascript不阻塞所有异步代码，例如setTimeout，它们将在调用堆栈中没有阻塞操作（即循环结束）之后执行。

当循环结束时，i is 3的值将被执行result += 3 3次，结果变为9

但是如果您希望它成为我可以从下面的问题中看到的

result += 0;
result += 1;
result += 2;

结果3

然后您可以通过closure

实现它

var result = 0;
for (var i=0; i < 3; i++) {
  const j = i;
  setTimeout(function() {
    result += j;
    console.log(result);
  }, 1000);
}

在这种情况下，最终结果将为3

这里发生的是，声明的j在每次循环迭代中都将封闭i的值，并且每次迭代的setTimeout都会记住在迭代时附加的j的值。 / p>

希望这会有所帮助

有人可以帮忙解释一下forTime循环中的setTimeout如何工作吗？这和关闭有关系吗

2 个答案: