javascript - jQuery/JavaScript - 在一个函数完成后启动一个函数？

Question

在另一个函数完成后触发函数的最佳方式是什么？

目前我有 6 个函数在 DOM 加载时调用，如下所示:

$(document).ready(function(){
    func1();
    func2();
    func3();
    func4();
    func5();
    func6();
});

function func1(){
    do some stuff
}

function func2(){
    do some stuff
}

function func3(){
    do some stuff
}

function func4(){
    do some stuff
}

function func5(){
    do some stuff
}

function func6(){
    do some stuff
}

但我希望他们一个接一个地开火。我该怎么做？

提前致谢

Answer 1

尝试使用回调，例如，

$(document).ready(function(){
    func1(func2);
});

function func1(callback){
    do some stuff
    callback('func2');
}

function func2(callback){
    do some stuff
    callback('func3');
}

function func3(callback){
    do some stuff
    callback('func4');
}

function func4(callback){
    do some stuff
    callback('func5');
}

function func5(callback){
    do some stuff
    callback('func6');
}

function func6(callback){
    do some stuff
}

阅读callback-functions-javascript

可以引用Is there a better way to do callback chaining in javascript?对于链式回调

function func1(){
    do some stuff
    _next();
}

function func2(){
    do some stuff
    _next();
}

function func3(){
    do some stuff
    _next();
}

function func4(){
    do some stuff
    _next();
}

function func5(){
    do some stuff
    _next();
}

function func6(){
    do some stuff
    _next();
}
function chainCallbacks() {

    var _this = this;
    var _counter = 0;
    var _callbacks = arguments;

    var _next = function() {
        _counter++;
        if(_counter < _callbacks.length) {
            _callbacks[_counter].apply(_this);
        }
    };

    _this._next = _next;

    return function() {
        if(_callbacks.length > 0) {
            _callbacks[0].apply(_this);
        }
    };
}

var queue = chainCallbacks(func1, func2, func3,func4,func5,func6);
queue();