jQuery / JavaScript - 一旦另一个函数完成,就启动一个函数?

时间:2013-11-06 12:55:30

标签: javascript jquery function

一旦完成另一个功能,最好的方法是什么?

目前我有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
}

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

提前致谢

3 个答案:

答案 0 :(得分:0)

尝试使用callbacks之类的,

$(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?参考chained callbacks

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();

答案 1 :(得分:0)

您编写它的方式对于同步代码是正确的。但是,根据您的评论,它听起来像是在触发异步运行的外部请求。在这种情况下会发生的事情是,function1可以触发一些访问Sharepoint的代码,然后在那之后完成函数1中的其余代码......然后直接进入function2而无需等待看到Sharepoint请求发生了什么。 / p>

我首选的处理方法是使用异步操作的回调。例如,一旦从Sharepoint中提取数据,您将调用其他一些函数(我们称之为Sharepoint_callback1)。添加对该函数的调用:

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

function func1(){
    do some stuff that calls Sharepoint, which after complete calls Sharepoint_callback1
}

function func2(){
    do some stuff
}

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

还有其他方法可以做到这一点。 JQuery几乎为它的操作提供了回调处理程序,但它基本上归结为与上面相同的东西。

如果我误解了我道歉的问题;请发布其他详细信息,我会修改我的答案。

答案 2 :(得分:0)

您可以编写队列函数。对于函数队列,您可以使用数组:

var fn1 = function() {}, 
fn2 = function() {},
MyQ = [];

//add functions to array
MyQ.push(fn1);
MyQ.push(fn2);

//remove and call the first item of an array
(MyQ.shift())();

如果要使用带范围和参数的函数,可以包装函数,例如:

MyFnWithParam = function(fn, scope, params){
    scope = scope || window;
    params = params || [];
    return function() {fn.apply(scope, params)};
};

var fn1 = MyFnWithParam(fn, this, params),
fn2 = MyFnWithParam(fn, this, params),
MyQ = [];

MyQ.push(fn1);
MyQ.push(fn2);

while (MyQ.length > 0) {
    (MyQ.shift())();   
}