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

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