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或{ {1}}首先可能在实现之间有所不同。）

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

在setTimeout - JavaScript之后执行一系列函数调用

1 个答案: