Question

我正在做一个西蒙游戏白衣Javascript。我希望当我显示颜色序列时，进行睡眠然后我将不透明度更改为0.3然后再次睡眠并再次将颜色的不透明度更改为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);

Answer 2

这不是浏览器环境中的工作方式。在执行Javascript函数期间，不会刷新您的浏览器显示。

此外，在一段JavaScript代码中“休眠”将基本冻结您的页面。在您的代码执行完毕之前，您的浏览器不会响应用户输入或其他事件，这很有可能让观众烦恼。

您必须使用计时器才能使更改可见，以便可以在不同的计时器调用之间更新页面。

Answer 3

你可以这样做setTimeout函数： -

 window.setTimeout(function(){
    document.getElementById(cicleCount[x]).style.opacity = 1;
  },1000);
  window.setTimeout(function(){
    document.getElementById(cicleCount[x]).style.opacity = 0.3;
  },2000);

在两种风格变化之间睡觉

3 个答案: