Javascript，for 循环将不起作用

Question

var a=0;
setTimeout (function () { animatedDraw(context, 20+32*level[0],20*0, textArray[0]); }, timeArray[0]);
setTimeout (function () { animatedDraw(context, 20+32*level[1],20*1, textArray[1]); }, timeArray[1]);
setTimeout (function () { animatedDraw(context, 20+32*level[2],20*2, textArray[2]); }, timeArray[2]);
setTimeout (function () { animatedDraw(context, 20+32*level[3],20*3, textArray[3]); }, timeArray[3]);
setTimeout (function () { animatedDraw(context, 20+32*level[4],20*4, textArray[4]); }, timeArray[4]);
setTimeout (function () { animatedDraw(context, 20+32*level[5],20*5, textArray[5]); }, timeArray[5]);

for (a=0; a<6; a++)
    setTimeout (function () { animatedDraw(context, 20+32*level[a],20*0, textArray[a]); }, timeArray[a]);

我的代码的第一部分是有效的部分。第二部分没有出现。我正在 Canvas (HTML 5) 中绘图，但是当我弹出六个警告框时，警告框显示出来了。我做错了什么非常愚蠢的事吗？

提前致谢

Answer 1

原因是您输入到 setTimeout 中的函数是闭包，并且闭包对它们关闭的变量有一个持久引用，而不是一个截至创建闭包时它们的值的副本。因此，所有这些函数都将尝试使用 a 的相同值，即循环完成后 的值(例如 6)，因此它们将失败。

答案是让函数关闭一些其他不会改变的数据。通常的方法是使用一个工厂函数来创建并返回您想要的实际函数，让它们关闭您输入工厂函数(不会改变)的参数而不是循环变量。例如:

for (a=0; a<6; a++) {
    setTimeout(makeTimerFunction(a), timeArray[a]);
}

function makeTimerFunction(index) {
    return function () {
        animatedDraw(context, 20+32*level[index],20*0, textArray[index]);
    };
}

如您所见，现在由 makeTimerFunction 创建的函数在 index 而不是 a 上关闭(也在 上context、level 和 textArray；如果它们发生变化，您也可以将它们传入)。

关于关闭的更多信息:Closures are not complicated