我有以下JavaScript代码:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable);
        function2(someOtherVariable);
    }
    else {
        doThis(someVariable);
    }
});

如何确保函数2只在函数1完成后才被调用?


当前回答

这个答案使用了承诺,这是ECMAScript 6标准的一个JavaScript特性。如果您的目标平台不支持promise,请使用PromiseJs填充它。

承诺是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延迟(从$。ajax调用):

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

正如@charlietfl指出的,$.ajax()返回的jqXHR对象实现了Promise接口。所以实际上没有必要把它包装在Promise中,它可以直接使用:

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

其他回答

如果function1是一个同步函数,你想把它变成一个异步函数,因为它需要一些时间来完成,并且你无法控制它添加一个回调:

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

输出将是:

Click handled

…2秒后:

This is function 1
This is function 2

这是因为调用window。setTimeout()将添加一个任务到JS运行任务循环中,这是异步调用所做的,并且因为JS运行时的“运行到完成”的基本原则确保onClick()在结束之前永远不会中断。

请注意,这很有趣,因为它使代码难以理解……

如果方法1必须在方法2、3、4之后执行。下面的代码片段可以使用JavaScript中的Deferred对象来解决这个问题。

function method1(){ var dfd = new $.Deferred(); setTimeout(function(){ console.log("Inside Method - 1"); method2(dfd); }, 5000); return dfd.promise(); } function method2(dfd){ setTimeout(function(){ console.log("Inside Method - 2"); method3(dfd); }, 3000); } function method3(dfd){ setTimeout(function(){ console.log("Inside Method - 3"); dfd.resolve(); }, 3000); } function method4(){ console.log("Inside Method - 4"); } var call = method1(); $.when(call).then(function(cb){ method4(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

指定一个匿名回调函数,并使函数1接受它:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();
} 

这取决于函数1在做什么。

如果function1正在执行一些简单的同步javascript,比如更新div值之类的,那么function2将在function1完成后触发。

如果function1正在进行异步调用,例如AJAX调用,您将需要创建一个“回调”方法(大多数AJAX API都有一个回调函数参数)。然后在回调中调用function2。例如:

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

如果你正在使用jQuery 1.5,你可以使用新的延迟模式:

$('a.button').click(function(){
    if(condition == 'true'){
        $.when(function1()).then(function2());
    }
    else {
        doThis(someVariable);
    }
});

编辑:更新博客链接:

丽贝卡·墨菲在这里写了一篇很棒的文章:http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/