執行一系列功能的setTimeout後調用 - 的JavaScript

Question

我有以下的代碼：

var gradient = new Gradient(element, [0, 0.99]); 
    setTimeout(function(){ 
     gradient.push([0, 0.99]); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.pop(); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.shift(); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.map(function(stop){ 
       return Math.min(1, stop + 0.392); 
      }); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.unshift(0); 
     gradient.pop(); 
    }, 3000); 

    gradient.clear(); 

我有一個徑向漸變每個函數調用（在梯度不同的操作）之後發生改變。爲了最終演示每個函數調用所做的更改，我設置了一系列setTimeout（），以便用戶可以看到發生的更改。 我期待在每次函數調用後執行相應的操作，但是當我在瀏覽器上測試時，只執行最後一次調用（gradient.clear()）。我不確定之前的setTimeout調用是否正在執行，或者直到最後一次調用才被跳過。任何想法 ？

Answer 1

決不能混淆setTimeout和pause。 MDN documentation將setTimeout定義爲

調用函數或在指定的延遲後執行代碼片段。

沒有提及暫停程序的執行。

setTimeout(f, 3000); 
setTimeout(g, 3000); 

h(); 

此代碼第一執行功能h，然後f和g後（不同時，天氣g或f自帶第一可以實現之間有所不同。）

你在找什麼三秒事件鏈接 - 從setTimeout函數中調用setTimeout。

你想要什麼可以用的效果隊列

var q = [] 

function run() { 
    var item = q.shift(); 
    item.func(); 
    if (q.length > 0) { 
     setTimeout(run, item.pause); 
    } 
} 

q.push({ func: f1, pause: 1000 }); 
q.push({ func: f2, pause: 1000 }); 

run()​; 

在這裏發揮作用f1將執行來實現，f2會之後執行第二。