在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文檔將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將執行一秒鍾。