javascript - 回调方法的所有执行都为递增变量保留相同的值

Question

我目前有一个使用 setInterval() 的工作计划回调方法，但是，我的代码的早期版本确实让我烦恼。如果有人能给我解释一下那就太好了。

这是我之前使用的完整实现，但不起作用:

function myCallBack(localPage) {
	console.log('myCallBack ' + localPage);
}

var page = 1;
var timeout = 5000;
var timeoutInterval = 5000
console.log('timeout ' + timeout);
while (page < 10) {
	setTimeout(function() { myCallBack(page) },timeout);
        // Add 10 seconds for the next execution
	timeout += timeoutInterval;
	page++;
}

我的 JavaScript 有点生疏，所以如果某些看似显而易见的实现看起来很愚蠢，请耐心等待。另外，我不熟悉这个 setTimeout 函数，并且文档对我来说也不清楚。

我的问题是 localPage 始终为 10。它是否通过引用传递该值？当我在循环内输出“page”时，数字是正确的。我假设在整个循环执行后调用回调是否正确？异步行为对我来说很好。我只是希望每次执行都有一个较早的“page”值。

为了使脚本正常工作，我用 setInterval() 替换了整个循环。

Update: zhangjinzhou explains the issue. The callbacks, being non-blocking, is passed through the loop. By the time they all start executing, the last value of "page" is being read by them.

Bougarfaoui's code fixes the issue. Go for Denny's code if you're more of a stickler for syntax.

我想我对这件事的愚蠢是正确的。当我再次浏览文档时:

Schedules execution of a one-time callback after delay milliseconds. Returns a Timeout for use with clearTimeout().

表示超时后。所以我想可以肯定地说循环在超时完成之前已经完成了。哦!

Answer 1

这解决了问题:

var page = 1;
    var timeout = 1000;
    var timeoutInterval = 500
    console.log('timeout ' + timeout);
    while (page < 10) {
        (function(page){
            setTimeout(function() { myCallBack(page) },timeout);
        })(page);

            // Add 10 seconds for the next execution
        timeout += timeoutInterval;
        page++;
    }

您遇到了关闭问题，setTimeout 是异步的，因此它将采用页面的最后一个值，即 10。