Javascript 逐个执行函数

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

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

如果我这样称呼他们：

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

它们将同时执行。我怎样才能一个接一个地调用它们，所以

step2（）step1（）之后调用code>完成并且
步骤3（）step2（）之后调用code>已完成

//更多信息

Step1（）

//功能

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

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

});

jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
var cardType=$.cookie（'cardType'）；
var categoryID=$.cookie（'categoryID'）；
函数step1（）{
$.getJSON（'http://domain.com/benefits/active/all.json，函数（数据）{
$。每个（数据、功能（i、项）{
if（item.benefit\u type\u id==categoryID）{
content='
'+item.name+'
'；
$（内容）。附加到（“#列表”）；
}
}); 
步骤2（）；
});
}//函数step1（）；
函数step2（）{
美元（“.company”）。每个（功能（i，项目）{
var tentitle=item.title；
$.getJSON（'http://domain.com/businesses/from_list/“+testitle+”.json'，函数（数据2）{
$。每个（数据2，功能（i，项目）{
content=''+item.name+''；
$（content）.appendTo（“div[title='”+entitle+']）；
}); 
步骤3（）；
});
});
}//函数step2（）；
函数step3（）{
加载（）；
$（'#加载'）。延迟（1000）。淡出（'slow'，function（）{
//动画完成。
});
}//函数step3（）；
步骤1（）；
});
如果函数中没有异步行为，则将按顺序调用它们。您可能在控制台中看到的输出时间与您预期的不同，我相信firefox中的控制台会缓冲输出，并且在某些情况下（虽然不经常）会产生误导

如果这些函数中确实存在异步行为，则需要使其同步，或者将对function2的调用放在对function1的回调中，将function3放在对function2的回调中。这将确保只有在function1达到适当的状态时才会调用function2。
不知道每个函数中执行的是什么，我假设它们中没有一个本身执行异步调用，即：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() {
    //...
}

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

或者，您可以在函数签名中使用回调，如下所示：

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() {
    //...
}

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

或者使用jQuery deferred可能会起作用，如下所示：

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() {
    //...
}

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

我不能100%确定使用
.when（）
的延迟解决方案

上面的代码似乎使用
when（）
工作，但正如注释中提到的
FelixKing
，如果您更新方法以返回a，则可以执行以下操作：

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


-使用延期承诺


对于下一个方法，必须解析每个延迟对象（）
待执行。

这也会给你一些控制，如果你有
例如，如果出现以下情况，则不希望执行
step3（）
step2（）
无法执行某些操作，例如调用
.reject（）

与小提琴中的延迟对象玩一玩，并查看
这也需要更多的细节

演示中的示例代码：

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

由于JavaScript是单线程的，所以它们将按顺序执行。或者，至少是人们通常使用的东西。你能告诉我们在这些函数中运行的是什么吗？Step1（）执行一个json并将细节附加到html中，Step2（）执行另一个json并将信息附加到Step1（）创建的div中，Step3（）只是隐藏一个加载动画。json无法执行，它是一种数据格式。你的意思是你在提出Ajax请求吗？是的，我在提出Ajax请求。我将更新我的问题并发布确切的函数。在这种情况下，当
出现时，您可能不需要使用
$
step1（）.then（step2）.then（step3）
如果它们都返回延迟的对象和承诺，则应该可以正常工作。尝试了“step1（）.then（step2）.then（step3）”和step3（）方法，但从未被调用过。控制台错误：未捕获的TypeError:无法调用的方法“then”undefined@Andrei：如
FelixKing
所述，函数必须返回一个
promise（）
才能将它们链接到
then（）
。否则你就会犯这个错误。