如何使用setTimeout()使函数按顺序工作

how to make functions with setTimeout() work in sequence?

本文关键字:函数 顺序 工作 何使用 setTimeout      更新时间:2023-09-26

假设我有4个函数,每个函数都与setTimeout()有内部循环。如何使这些函数按顺序运行而不重叠?也就是说,我如何让每个线程在前一个线程完成后执行?

function1();
function2();
function3();
function4(); 

让每个函数在完成后调用下一个函数

如果你想让它"动态",实现一个函数队列,并让每个函数在完成后调用队列中的下一个函数。然后,您可以通过填充队列并调用第一个函数来启动一个排序过程。

function function1(cb) {
    if (someCondition) {
        setTimeout(function1, 0);
    } else {
        // we are done
        cb();
    }
}
...
function1(function() {
    function2(function() {
        function3(function() {
            function4();
        });
    });
});

代码开始变得混乱,如果你走得太深,所以使用某种流量控制,如Step。如果不是node, Step可能无法工作。

一个简单的队列可以是:

var queue = {
    items: [],
    add: function() {
        for (var i = 0; i < arguments.length; i++) {
            this.items.push(arguments[i]);
        }
    },
    run: function() {
        var this = that;
        this.items.shift()(function() {
            that.run();
        })
    }
};
queue.add(function1, function2, function3, function4);

这里的每个函数都应该以函数形参done作为其第一个参数,并且应该在函数完成时调用。

你可以传递一个函数数组,

和参数本身为数组的函数。

每个函数必须在为下一个函数设置计时器之前返回

function fifo(what, delay){
    if(what.shift){
        var a, f= what.shift() || '';
        if(typeof f== 'function') f();
        else if(f.constructor== Array){
            a= f.splice(1, f.length);
            f[0].apply(this, a);
        }
        if(what.length){
            setTimeout(function(){
                fifo(what, delay);
            },
            delay);
        }
    }
};
function announce(){
    return alert(location.href)
}
var A= [[alert, 1], [alert, 2], announce, [alert, 'That''s All!']];
fifo(A, 100);