前一个function完成后调用一个function

我有以下JavaScript代码：

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

我怎样才能确保function2只在function1完成后才被调用？

Answer 1

指定一个匿名callback，并使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); } }); 

编辑：更新博客链接：

丽贝卡·墨菲（Rebecca Murphy）在这里写了一篇很好的文章： 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

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

Promise是一种新的（也是更好的）方法来处理JavaScript中的asynchronous操作：

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

对于这个简单的例子来说，这看起来像是一个很大的开销，但是对于更复杂的代码，它比使用callback要好得多。 您可以使用多个then语句轻松链接多个asynchronous调用：

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

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'只能执行AFTER函数'a'，因为触发器只有在函数a完成执行时才存在。

Answer 6

这取决于function1在做什么。

如果function1正在做一些简单的同步javascript，比如更新一个div值或者什么的，那么function2会在function1完成后触发。

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

 function1() { new AjaxCall(ajaxOptions, MyCallback); } function MyCallback(result) { function2(result); }