Question

我遇到了一个我真的没有得到的setInterval方法的奇怪问题。

所以我创建了一个包含25个盒子的网站，其想法是点击任何一个框会改变该框的backgroundColor半秒钟，之后它将恢复原始颜色。在该动画完成后，下一个框将改变其颜色半秒，然后返回到原始状态。这个循环将一直持续到它到达最后一个方框。

我为此写的代码是：

window.onload = function() {
    var box = document.getElementsByClassName("box");
    for (i = 0; i < box.length; i++) {
        box[i].onclick = starter;
    }
}

function starter(eo) {
    var box = eo.target;
    var counter = eo.target.id;
    box.style.backgroundColor = "#1A237E";
    setTimeout(cont, 500, counter);
}

function cont(counter) {
    var box = document.getElementsByClassName("box");
    box[counter].style.backgroundColor = "white";
    counter++;
    box[counter].style.backgroundColor = "#1A237E";
    if (counter < box.length) {
        setInterval(cont, 500, counter);
    }
}

（所有方框都有“box”类，并标有0到24之间的ID）代码实际执行并且在技术上有效。奇怪的是，在大约8次迭代之后，几个盒子开始同时闪烁（cont（）函数的每次迭代都有不同的盒子），整个代码大大减慢。无论起始位置如何都会发生这种情况

我不知道我在代码中犯了什么错误，有人可以向我解释白色会发生吗？

非常感谢提前:)

Javascript setInterval（）创建一个奇怪的结果（？）

0 个答案: