Question

我有12个彩色方块，当点击一个按钮时，随机选择6个，背景颜色变为黑色。

正方形都在同时改变颜色，直到我添加了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")
}

Answer 2

如果我不得不猜测我会说错误是由你的for循环周围缺少花括号引起的。在setTimeout之前和循环的最后一部分之后应该有一个{或}

代码外部循环首先执行

2 个答案: