上一个功能完成后调用一个函数

Question

我有以下JavaScript代码：$('a.button').click(function(){    if (condition == 'true'){        function1(someVariable);        function2(someOtherVariable);    }    else {        doThis(someVariable);    }});如何确保function2仅在function1完成后调用？

Answer 1

指定匿名回调，并使function1接受它：

$('a.button').click(function(){

    if (condition == 'true'){

        function1(someVariable, function() {

          function2(someOtherVariable);

        });

    }

    else {

        doThis(someVariable);

    }

});

function function1(param, callback) {

  ...do stuff

  callback();

} 

Answer 2

这个答案使用promises了ECMAScript 6标准的JavaScript功能。如果您的目标平台不支持promises，请使用PromiseJs对其进行填充。

Promise是一种新的（并且更好）处理JavaScript中的异步操作的方法：

$('a.button').click(function(){

    if (condition == 'true'){

        function1(someVariable).then(function() {

            //this function is executed after function1

            function2(someOtherVariable);

        });

    }

    else {

        doThis(someVariable);

    }

});

function function1(param, callback) {

    return new Promise(function (fulfill, reject){

        //do stuff

        fulfill(result); //if the action succeeded

        reject(error); //if the action did not succeed

    });

} 

对于这个简单的示例来说，这似乎是一个重要的开销，但对于更复杂的代码，它远比使用回调更好。您可以使用多个then语句轻松链接多个异步调用：

function1(someVariable).then(function() {

    function2(someOtherVariable);

}).then(function() {

    function3();

});

您还可以轻松地包装jQuery deferrds（从$.ajax调用返回）：

Promise.resolve($.ajax(...params...)).then(function(result) {

    //whatever you want to do after the request

});

正如@charlietfl所说，实现接口jqXHR返回的对象。所以实际上没有必要将它包装成a ，它可以直接使用：$.ajax()PromisePromise

$.ajax(...params...).then(function(result) {

    //whatever you want to do after the request

});