Javascript – setTimeout关闭问题

我正在努力解决下面的代码.我尝试了很多不同的方法,但我最终得到了两个不正确的结果之一.

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总是得到最后的结果[i] .x / result [i] .y.因此,当超时运行函数时,我正在假设它看到什么结果[i] .x / result [i] .y在循环之后保持开启(而不是将其作为“新”变量传递)

我认为将它放入函数会解决闭包问题,但没有运气.

还尝试过：

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

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

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

与第一个代码具有相同的结果.

如果我做：

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

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

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

它确实正确处理所有fillBlock函数.但它同时完成所有这些操作(例如,它不是一次一个地触发它们.它只是在彼此之后执行它们但导致阻塞(没有屏幕更新)并且每个之间没有延迟.

任何帮助都会很棒！

解决方法

原因是它正在执行它们是因为您正在执行setTimeout调用中的函数.我要做的是创建另一个这样的函数

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

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

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

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

这应该工作. setTimeout期望一个函数在超时结束时调用,你给你的函数,但是马上调用它.返回值(在本例中为null)将被赋予超时.所以没有超时,一切都发生了.

为了防止上下文我的答案有点复杂,here是jsfiddle中更简单解决方案的链接.