0

次のコードがあります。

    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呼び出しが実行されているかどうか、または最後の呼び出しまでスキップされているかどうかはわかりません。何か案が ？

4

1 に答える 1

5

setTimeoutと混同してはいけませんpause。MDN ドキュメントでは、次のように定義setTimeoutされています。

指定された遅延の後に関数を呼び出すか、コード スニペットを実行します。

プログラムの実行を一時停止することについては言及されていません。

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

h();

このコードは、最初に関数を実行しh、次にfそのg3 秒後に実行します (同時にではなく、天気が先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その 1 秒後に実行されます。

于 2012-10-22T13:54:51.283 に答える