javascript - 睡在两次风格变化之间

Question

我正在使用 Javascript 开发 Simon 游戏。我希望当我显示颜色序列时， sleep 然后我将不透明度更改为 0.3，然后再次 sleep 并将颜色的不透明度再次更改为 1。但是当我尝试它时，它不会休眠，只会在我发出警报或暂停执行的东西时等待。

我的代码是:

for(x = 0; x < cicleCount.length; x++) {
    cicleCount[x] = colors[Math.floor((Math.random() * colors.length))];
    sleep(1000);
    document.getElementById(cicleCount[x]).style.opacity = 1;
    sleep(1000);
    document.getElementById(cicleCount[x]).style.opacity = 0.3;
}

我的 sleep() 函数:

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

我也尝试使用 setTimeout()，但它不起作用，它只是在没有任何暂停的情况下执行所有代码。

Answer 1

您使用 sleep() 的方法称为 busy waiting这不是一个好主意，因为会导致不必要的 CPU 负载，并且在 JavaScript 的情况下，它会阻塞 UI 线程。

您确实需要Window.setTimeout() ，这会在设定的时间后运行一个回调(函数)。

没有看到您在 Window.setTimeout 上的失败尝试，我无法提供更多信息来说明为什么它不起作用。请更新您的问题。

但是，我猜你最好使用 window.setInterval() 和某种时钟，然后你可以增加时钟来改变不透明度。在下面的代码中，如果我做对了，x 应该按照顺序 0、0、1、1、2、2，直到 (cicleCount.length - 1)，并且不透明度应该切换 1、0.3、1 , 0.3 等

var clock = 0;
var tick = function() {
   var x = (clock / 2) % cicleCount.length;
   cicleCount[x] = colors[Math.floor((Math.random() * colors.length))];
   if (clock % 2 == 0) {
     document.getElementById(cicleCount[x]).style.opacity = 1;
   } else {
     document.getElementById(cicleCount[x]).style.opacity = 0.3;
   }
   clock++;
};
var timer = window.setInterval(tick, 1000);

如果稍后需要停止动画，请使用以下命令。

window.clearInterval(timer);