Question

我有3种不同的jQuery函数，如：

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

如果我这样打电话给他们：

step1();
step2();
step3();

它们将全部在同一时间执行。如何逐个调用它们，以便在step2();完成后调用step1();并在step3();完成后调用step2();。

//更多信息

Step1()正在执行json并向html追加详细信息，Step2()正在执行另一个json并在Step1()和Step3()创建的div中添加信息，只是隐藏了一个加载动画。

//功能

根据一些用户的要求，以下是功能：

jQuery.noConflict();

jQuery(document).ready(function($) {

    var cardType = $.cookie('cardType');
    var categoryID = $.cookie('categoryID');

    function step1() {
        $.getJSON('http://domain.com/benefits/active/all.json', function(data) {
            $.each(data, function(i,item){
                if (item.benefit_type_id == categoryID) {
                    content = '<li><a class="showDetails" data-offer-description="' + item.description + '" data-offer-period="' + item.begin_date + ' - ' + item.end_date + '"><div class="company" title="' + item.business_id + '"></div><div class="shortdescription">' + item.name + '</div></a></li>';
                    $(content).appendTo("#thelist");
                }
            }); 
            step2();
        });
    } // function step1();

    function step2() {  
        $('.company').each(function(i, item) {
            var tempTitle = item.title;
            $.getJSON('http://domain.com/businesses/from_list/' + tempTitle + '.json', function(data2) {
                $.each(data2, function(i,item){
                    content = '<span>' + item.name + '</span>';
                    $(content).appendTo("div[title='" + tempTitle + "']");
                }); 
                step3();
            });
        });
    } // function step2();

    function step3() {
        loaded();
        $('#loading').delay(1000).fadeOut('slow', function() {
            // Animation complete.
        });
    } // function step3();

    step1();

});

Answer 1

我不知道你在每个函数中执行了什么，我假设它们本身都没有执行异步调用，即：ajax请求等等。

如果您在每个函数中发生了其他异步调用，则下面的内容不会按原样应用。

一种选择是使用另一种类似的调用方法：

function step1() {
    //...
    step2();
}

function step2() {
    //...
    step3();
}

function step3() {
    //...
}

或者您可以在函数签名中使用回调，类似于：

//pass step2 function as parameter to step1
//pass step3 function as parameter to step2
step1(step2(step3));

function step1(callback) {
    //...
    callback();
}

function step2(callback) {
    //...
    callback();
}

function step3() {
    //...
}

或者使用jQuery延迟可能会起作用，类似于：

$.when($.when(step1()).then(step2)).then(step3);

我对使用.when()的延期解决方案不是100％肯定。

上面的代码似乎使用when() (DEMO)，但评论中提到的FelixKing如果您更新方法以返回deferred promise，则可以执行此操作：< / p>

step1().then(step2).then(step3);

DEMO - 使用延期承诺

但是对于下一个方法，每个延迟对象必须是resolved()   被执行   如果你有这个，这也会给你一些控制权   例如，您不希望执行step3()的情况   step2()无法执行某些操作，例如调用.reject()。

与小提琴中的延迟对象进行游戏并查看   deferred promise documentation也有更多细节。

DEMO的示例代码：

step1().then(step2).then(step3);

function step1() {
    var $dfStep1 = new $.Deferred();

    console.log("step1");

    $dfStep1.resolve();
    return $dfStep1.promise();
}

function step2() {
    var $dfStep2 = new $.Deferred();

    console.log("step2");

    $dfStep2.resolve();
    return $dfStep2.promise();
}

function step3() {
    var $dfStep3 = new $.Deferred();

    console.log("step3");

    $dfStep3.resolve();
    return $dfStep3.promise();
}

Answer 2

如果函数中没有异步行为，那么它们将按顺序调用。你可能会在不同的时间看到控制台中的输出，我相信firefox等缓冲输出中的控制台，并且在某些情况下（尽管不常见）会产生误导。

如果你在这些函数中确实有异步行为，那么你需要使它同步或者在回调函数1中调用function2，并在函数2的回调函数中调用function3。这将确保只在function1达到适当状态时才调用function2。

逐个执行功能

2 个答案: