前一个函数完成后调用一个函数

Question

我有以下 JavaScript 代码：

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

如何确保只有在function1 完成后才调用function2？

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

如果您使用的是 jQuery 1.5，您可以使用新的 Deferreds 模式：

$('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/

Answer 3

试试这个：

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

Answer 4

此答案使用promises，这是ECMAScript 6 标准的JavaScript 功能。如果您的目标平台不支持promises，请使用PromiseJs 填充它。

Promises 是一种处理 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 所说，$.ajax() 返回的jqXHR 对象实现了Promise 接口。所以其实没必要用Promise包起来，直接用就可以了：

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

Answer 5

或者您可以在一个功能完成时触发自定义事件，然后将其绑定到文档：

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

使用这种方法，函数'b'只能在函数'a'之后执行，因为触发器只有在函数a执行完成时才存在。

Answer 6

你可以这样做

$.when(funtion1()).then(function(){
    funtion2();
})

Answer 7

这取决于 function1 正在做什么。

如果 function1 正在执行一些简单的同步 javascript，例如更新 div 值或其他内容，则 function2 将在 function1 完成后触发。

如果 function1 正在进行异步调用，例如 AJAX 调用，则需要创建“回调”方法（大多数 ajax API 都有回调函数参数）。然后在回调中调用function2。例如：

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

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

Answer 8

如果方法 1 必须在方法 2、3、4 之后执行。下面的代码 sn-p 可以是在 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>

Answer 9

如果 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 runtine 任务循环中添加一个任务，这是异步调用所做的，并且因为 JS 运行时“run-to-completion”的基本原则确保了onClick() 在结束之前永远不会被中断。

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