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. MDNsetTimeout文档定义为

在指定延迟后调用函数或执行代码片段。

没有提到暂停程序的执行。

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

h();

此代码首先执行 function ，h然后在三秒后执行（不同时，weather or come first 可能因实现而异。）fggf

您正在寻找的是事件链 -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之后将执行一秒钟。

于 2012-10-22T13:54:51.283 回答