睡眠之間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風格變化

回答

相關問題