Javascript延遲

Question

我正在製作一個測試頁，其中包含執行不同腳本的按鈕。我想每秒改變背景顏色5秒，總共5種顏色。我已閱讀並觀看了setInterval和setTimeout上的視頻，我只是不明白。

我想要什麼：

x 
wait 1sec 
y 
wait 1sec 
z 
wait 1 sec 
etc... 

我想要做的這一切功能於一體，但我放棄了，由於看似需要在setTimeout(function, 500)

引用一個功能，所以我創建了一個每個顏色變化的新功能如你所見，然後創建一個可以調用每個背景變化的disco()。

有點困惑說實話，代碼應該澄清我試過的。只要說它不起作用，這是我放棄的地方。

我將非常感謝解釋如何做到這一點。謝謝！

function disco() { 
    setTimeout(aquaman, 500); 
    setTimeout(pinkman, 500); 
    setTimeout(blueman, 500); 
    setTimeout(redman, 500); 
    setTimeout(brownman, 500); 
} 

function aquaman() { 
    document.body.style.backgroundColor = "aqua"; 
} 

function brownman() { 
    document.body.style.backgroundColor = "brown"; 
} 

function redman() { 
    document.body.style.backgroundColor = "red"; 
} 

function pinkman() { 
    document.body.style.backgroundColor = "pink"; 
} 

function blueman() { 
    document.body.style.backgroundColor = "blue"; 
} 

Answer 1

下面的代碼將背景顏色更改爲數組中的下一個，所有你需要做的是設置的時間間隔就可以給你想要的顏色改變的時候，跌落如果評論你對此是如何工作的疑惑：

function changeColor(){ 
 
     var colors = ['aqua','brown','red','pink','blue'], 
 
      currColor = ((colors.indexOf(document.body.style.backgroundColor) + 1) % 5); 
 
     
 
     if(currColor === -1) currColor = 0; 
 

 
     document.body.style.backgroundColor = colors[ currColor ]; 
 
    } 
 

 
    setInterval(changeColor, 1000)

Answer 2

setTimeout()是一個異步API。你用它來調用瀏覽器執行你在n毫秒後傳遞的函數。所有setTimeout（）調用都將超時設置爲500，這意味着所有這些函數都將在大致相同的時間執行。

此：

function disco() 
{ 
setTimeout(aquaman, 500); 
setTimeout(pinkman, 1000); 
setTimeout(blueman, 1500); 
setTimeout(redman, 2000); 
setTimeout(brownman, 2500); 
} 

將實現所期望的結果，但考慮到寫此功能是作爲重構的一部分，更多的方案：

function aquaman() { 
    document.body.style.backgroundColor = "aqua"; 
} 

function brownman() { 
    document.body.style.backgroundColor = "brown"; 
} 

function redman() { 
    document.body.style.backgroundColor = "red"; 
} 

function pinkman() { 
    document.body.style.backgroundColor = "pink"; 
} 

function blueman() { 
    document.body.style.backgroundColor = "blue"; 
} 

function disco() { 
    var timeout = 500; 
    var funcs = [aquaman, brownman, redman, pinkman, blueman]; 
    funcs.forEach(function(func) { 
     setTimeout(func, timeout); 
     timeout += 500; 
    }); 
} 

這個例子減少一些重複，但不是全部。我們仍然可以將這些不必要的重複函數定義分解出來：

function disco() { 
    var timeout = 500; 
    var colors = ['aqua', 'brown', 'red', 'pink', 'blue']; 
    colors.forEach(function(color) { 
     setTimeout(function() { 
     document.body.style.backgroundColor = color; 
     }, timeout); 
     timeout += 500; 
    }); 
} 

這是對您的問題提供完美服務的解決方案。

Answer 3

var colors = ['red','pink','blue']; 
 
    var currentColor = 0; 
 
    function changeColor() { 
 
     setTimeout(function() { 
 
     if(currentColor === colors.length) { 
 
      currentColor = 0; 
 
     } 
 
     document.body.style.backgroundColor = colors[currentColor]; 
 
     changeColor(currentColor++); 
 
     }, 500); 
 
    } 
 
    changeColor();

中的setTimeout recursivly執行changeColor，因爲你要延遲執行每500ms的

Answer 4

var bg = { 
 
     colors: ['red','blue', 'green'], 
 
     next: 0, 
 
     getNextColor: function(){ 
 
      return this.colors[this.next++ % this.colors.length]; 
 
     } 
 
    }; 
 

 
    setInterval(function() { 
 
      document.body.style.backgroundColor = bg.getNextColor(); 
 
     }, 1000);

Answer 5

非常基本的：

<script> 

(function disco() { 
    setTimeout(function aquaman() {document.body.style.backgroundColor = "aqua";}, 0); 
    setTimeout(function pinkman() {document.body.style.backgroundColor = "pink";}, 1000); 
    setTimeout(function blueman() {document.body.style.backgroundColor = "blue";}, 2000); 
    setTimeout(function redman() {document.body.style.backgroundColor = "red";}, 3000); 
    setTimeout(function brownman() { document.body.style.backgroundColor = "brown";}, 4000); 
})(); 
</script> 

演示：http://jsbin.com/qumagozosi/edit?html,js,output