睡眠之间2风格变化

我正在做一个西蒙游戏白色Javascript。我希望当我显示颜色序列时，做一个睡眠，然后将不透明度更改为0.3，然后再次入睡，并将颜色的不透明度再次更改为1。但是，当我尝试它，它不睡觉，只有等待，当我把警报或暂停执行的东西。睡眠之间2风格变化

我的代码是：

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; 
}

我的睡眠（）函数：

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

我也尝试白衣一个的setTimeout（），但它不工作，它只是执行所有的代码，没有任何停顿。

来源

2014-10-31 Raxkin

您可以发布所有的代码？也是HTML等 – Refilon 2014-10-31 13:16:18

您使用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);

来源

2014-10-31 13:17:05 Adam

它的工作原理，不是我想要的方式，但我可以对其进行更改，谢谢。 – Raxkin 2014-10-31 13:31:08

@Raxkin不用担心，很乐意帮忙。 – Adam 2014-10-31 13:33:26

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

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

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

来源

2014-10-31 13:13:18

您可以在此做这样的setTimeout函数： -

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

来源

2014-10-31 13:18:10 Indra

睡眠之间2风格变化

回答

相关问题