javascript - 首先执行循环外的代码

Question

我有 12 个彩色方 block ，当单击按钮时，会随机选择 6 个方 block ，并且背景颜色变为黑色。

这些方 block 都同时改变颜色，直到我添加了 setTimeout 函数，该函数解决了该问题，但导致了另一个问题 - 循环外部的代码在循环之前执行，即调用 Reset 函数和警报。

for (var i = 0; i < 6;i++)
{
setTimeout(function () 
{
  var rand = arr[Math.floor(Math.random() * arr.length)];       
  var square = document.getElementById('square' + rand);
  square.style.background="black";
},1000 * i);
}

Reset()
alert("Reset function")

我认为 setTimeout 函数在某种程度上导致了这个问题 - 有办法解决这个问题吗？

谢谢。

Answer 1

使用闭包应该可以解决您的问题:

var length = 6;

for (var i = 0; i < length ; i++)
(function (i) {
    setTimeout(function () {
        var rand = arr[Math.floor(Math.random() * arr.length)];
        var square = document.getElementById('square' + rand);
        square.style.background = "black";
        if (i === length - 1) Reset();

    }, 1000 * i);
})(i);


function Reset() {
    alert("Reset function")
}