blocks|key|1001724|text|指定匿名回调，并让function1接受：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1001725|$('a.button').click(function(){
++++if+(condition+==+'true'){
++++++++function1(someVariable,+function()+{
++++++++++function2(someOtherVariable);
++++++++});
++++}
++++else+{
++++++++doThis(someVariable);
++++}
});


function+function1(param,+callback)+{
++...do+stuff
++callback();
}+|code-block|syntax|javascript|1001726|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Specify an anonymous callback, and make function1 accept it:

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


function function1(param, callback) {
 ...do stuff
 callback();
} 
</code></pre>

blocks|key|1001791|text|这取决于function1正在做什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1001792|如果function1正在做一些简单的同步javascript，比如更新div值或其他东西，那么function2将在function1完成后触发。|1001793|如果function1正在进行异步调用，比如AJAX调用，您将需要创建一个“回调”方法(大多数ajax+API都有一个回调函数参数)。然后在回调中调用function2。例如：|1001794|function1()
{
++new+AjaxCall(ajaxOptions,+MyCallback);
}

function+MyCallback(result)
{
++function2(result);
}|code-block|syntax|javascript|1001795|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This depends on what function1 is doing.

If function1 is doing some simple synchrounous javascript, like updating a div value or something, then function2 will fire after function1 has completed.

If function1 is making an asynchronous call, such as an AJAX call, you will need to create a "callback" method (most ajax API's have a callback function parameter). Then call function2 in the callback. eg:

<pre><code>function1()
{
 new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
 function2(result);
}
</code></pre>

blocks|key|787520|text|或者，您可以在一个函数完成时触发一个自定义事件，然后将其绑定到文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787521|function+a()+{
++++//+first+function+code+here
++++$(document).trigger('function_a_complete');
}

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

$(document).bind('function_a_complete',+b);|code-block|syntax|javascript|787522|使用此方法，函数'b‘只能在函数'a’之后执行，因为触发器仅在函数a完成执行时存在。|787523|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Or you can trigger a custom event when one function completes, then bind it to the document:

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

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

$(document).bind('function_a_complete', b);
</code></pre>

Using this method, function 'b' can only execute AFTER function 'a', as the trigger only exists when function a is finished executing.

blocks|key|787551|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787552|function+method1(){
+++//+some+code

}

function+method2(){
+++//+some+code
}

$.ajax({
+++url:method1(),
+++success:function(){
+++method2();
}
})|code-block|syntax|javascript|787553|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this :

<pre><code>function method1(){
 // some code

}

function method2(){
 // some code
}

$.ajax({
 url:method1(),
 success:function(){
 method2();
}
})
</code></pre>

blocks|key|787614|text|此答案使用promises，这是ECMAScript+6标准的JavaScript特性。如果你的目标平台不支持promises，用PromiseJs填充它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|787615|Promises是一种在JavaScript中处理异步操作的新方法(而且要好得多)：|787616|$('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
++++});
}+|code-block|syntax|javascript|787617|对于这个简单的示例，这似乎是一个很大的开销，但对于更复杂的代码，它比使用回调要好得多。您可以使用多个then语句轻松链接多个异步调用：|787618|function1(someVariable).then(function()+{
++++function2(someOtherVariable);
}).then(function()+{
++++function3();
});|787619|您还可以轻松地包装jQuery延迟(从$.ajax调用返回)：|787620|Promise.resolve($.ajax(...params...)).then(function(result)+{
++++//whatever+you+want+to+do+after+the+request
});|787621|正如@charlietfl所指出的，由$.ajax()返回的jqXHR对象实现了Promise接口。所以实际上没有必要将它包装在Promise中，它可以直接使用：|787622|$.ajax(...params...).then(function(result)+{
++++//whatever+you+want+to+do+after+the+request
});|787623|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise|1|https://www.promisejs.org/^0|5|8|G|C|1J|8|5|8|0|1T|9|1|0|0|0|1E|4|0|0|J|6|0|0|J|8|U|5|14|7|1S|7|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]|$9|1I|A|1J|1|1K]]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1U|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]]|D|@]|E|$]]|$1|W|3|X|5|J|7|24|8|@]|D|@]|E|$K|L]]|$1|Y|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]]]

<h2>This answer uses <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer"><code>promises</code></a>, a JavaScript feature of the <code>ECMAScript 6</code> standard. If your target platform does not support <code>promises</code>, polyfill it with <a href="https://www.promisejs.org/" rel="noreferrer">PromiseJs</a>.</h2>

Promises are a new (and a lot better) way to handle asynchronous operations in JavaScript:

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

This may seem like a significant overhead for this simple example, but for more complex code it is far better than using callbacks. You can easily chain multiple asynchronous calls using multiple <code>then</code> statements:

<pre><code>function1(someVariable).then(function() {
 function2(someOtherVariable);
}).then(function() {
 function3();
});
</code></pre>

You can also wrap jQuery deferrds easily (which are returned from <code>$.ajax</code> calls):

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

As @charlietfl noted, the <code>jqXHR</code> object returned by <code>$.ajax()</code> implements the <code>Promise</code> interface. So it is not actually necessary to wrap it in a <code>Promise</code>, it can be used directly:

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

blocks|key|787684|text|如果function1是某个同步函数，您希望将其转换为异步函数，因为它需要一些时间才能完成，并且您无法控制它来添加回调：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787685|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+();|code-block|syntax|javascript|787686|输出将为：|787687|Click+handled|787688|2秒后的...and：|787689|This+is+function+1
This+is+function+2|787690|这之所以有效，是因为调用window.setTimeout+()会将一个任务添加到JS运行任务循环中，这就是异步调用的结果，而且JS运行时的“从运行到完成”的基本原则确保了onClick+()在结束之前永远不会被中断。|787691|请注意，这很有趣，因为它使代码难以理解……|787692|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

If function1 is some sync function that you want to turn into an async one because it takes some time to complete, and you have no control over it to add a callback :
<pre><code>function function1 (someVariable) {
 var date = Date.now ();
 while (Date.now () - date &lt; 2000); // function1 takes some time to complete
 console.log (someVariable);
}
function function2 (someVariable) {
 console.log (someVariable);
}
function onClick () {
 window.setTimeout (() =&gt; { function1 (&quot;This is function1&quot;); }, 0);
 window.setTimeout (() =&gt; { function2 (&quot;This is function2&quot;); }, 0);
 console.log (&quot;Click handled&quot;); // To show that the function will return before both functions are executed
}
onClick ();
</code></pre>
The output will be :
<pre><code>Click handled
</code></pre>
...and after 2 seconds :
<pre><code>This is function 1
This is function 2
</code></pre>
This works because calling window.setTimeout () will add a task to the JS runtine task loop, which is what an async call makes, and because the basic principle of &quot;run-to-completion&quot; of the JS runtime ensures that onClick () is never interrupted before it ends.
Notice that this as funny as it makes the code difficult to understand...

blocks|key|787713|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787714|$.when(funtion1()).then(function(){
++++funtion2();
})|code-block|syntax|javascript|787715|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can do it like this

<pre><code>$.when(funtion1()).then(function(){
 funtion2();
})
</code></pre>

blocks|key|1002048|text|如果方法1必须在方法2，3，4之后执行。下面的代码片段可以使用JavaScript中的延迟对象来解决此问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002049|​|1002050|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();
});|code-block|syntax|javascript|1002051|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|1002052|1002053|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

If method 1 has to be executed after method 2, 3, 4. The following code snippet can be the solution for this using Deferred object in JavaScript.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>

I have the following JavaScript code:

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

How can I ensure that <code>function2</code> is called only after <code>function1</code> has completed?

Call a function after previous function is complete

jQuery

我有以下JavaScript代码：$('a.button').click(function(){    if (condition == 'true'){        function1(someVariable);        function2(someOtherVariable);    }    else ...

问在上一个函数完成后调用函数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在上一个函数完成后调用函数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在上一个函数完成后调用函数
EN