Javascript - setTimeout 关闭问题

Question

我正在努力处理下面的代码。我已经尝试了很多不同的方法来做到这一点，但我最终得到了两个不正确的结果之一。

for(i = 0; i < result.length; i++) {

    var tmpBlockInfo = {
        size: worldTest.data[0].size,
        xStartPixel :  result[i].x * worldTest.data[0].size,
        yStartPixel : result[i].y * worldTest.data[0].size,
        blockType : (Math.random() * 100 > 10) ? 'path' : 'wall'
    }

    var tmpFunc = function(){
        worldTest.fillBlock(tmpBlockInfo, 157, 152, 124,  255)
    };

    var t = setTimeout(function(){
        tmpFunc()
    } , 500 * i);
}

上面代码的问题是 tmpBlockInfo 总是得到最后的 result[i].x/result[i].y。所以我假设当超时运行函数时，它会看到循环后留下了什么 result[i].x/result[i].y(而不是将其作为"new"变量传递)

我认为将它放入函数中可以解决闭包问题，但没有成功。

也试过:

for(i = 0; i < result.length; i++) {

    var tmpBlockInfo = {
        size: worldTest.data[0].size,
        xStartPixel :  result[i].x * worldTest.data[0].size,
        yStartPixel : result[i].y * worldTest.data[0].size,
        blockType : (Math.random() * 100 > 10) ? 'path' : 'wall'
    }

    var t = setTimeout(function(){
        worldTest.fillBlock(tmpBlockInfo, 157, 152, 124,  255)
    } , 10000 * i);
}

与第一个代码的结果相同。

如果我这样做:

for(i=0; i < result.length; i++) {

    var tmpBlockInfo = {
        size: worldTest.data[0].size,
        xStartPixel :  result[i].x * worldTest.data[0].size,
        yStartPixel : result[i].y * worldTest.data[0].size,
        blockType : (Math.random() * 100 > 10) ? 'path' : 'wall'
    }

    setTimeout(function(passBlockInfo) {
        worldTest.fillBlock(tmpBlockInfo, 157, 152, 124,  255) 
    } (tmpBlockInfo), 1000 * i);
}

它确实正确处理了所有 fillBlock 函数。但是它同时执行所有操作(例如，它不是一次触发一个。它只是一个接一个地执行它们，但会导致阻塞(没有屏幕更新)并且每个操作之间没有延迟。

任何帮助都会很棒!

Answer 1

之所以立即执行它们，是因为您正在执行 setTimeout 调用中的函数。我要做的是像这样创建另一个函数

function MakeTimeoutCall(fn, data, timeout){
    setTimeout(function() {fn.call(null, data);}, timeout);
}

然后在调用 setTimeout 的循环中执行此操作

MakeTimeoutCall(
    function(passBlockInfo){
       worldTest.fillBlock(passBlockInfo, 157, 152, 124,  255);
    },
    tmpBlockInfo,
    1000 * i);

(假设 worldTest 是一个全局对象)。

那应该行得通。 setTimeout 期望在超时结束时调用一个函数，您正在提供您的函数，但立即调用它。然后将返回值(在本例中为 null)提供给超时。所以没有超时，一切都立即发生。

以防万一我的回答在上下文中有点复杂，here是指向 jsfiddle 中更简单解决方案的链接。