blocks|key|421585|text|This+page将向您介绍创建异步javascript函数的基础知识。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|421586|由于ES2017，异步javacript函数更容易编写。您还应该阅读更多关于Promises的内容。|421587|entityMap|0|LINK|mutability|MUTABLE|url|https://flaviocopes.com/javascript-async-await/|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise^0|0|9|0|0|12|8|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<a href="https://flaviocopes.com/javascript-async-await/" rel="nofollow noreferrer">This page</a> walks you through the basics of creating an async javascript function.

Since ES2017, asynchronous javacript functions are much easier to write. You should also read more on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="nofollow noreferrer">Promises</a>.

blocks|key|421684|text|MDN有一个关于使用setTimeout来保存"this“的good+example。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|421685|如下所示：|421686|function+doSomething()+{
++++//+use+'this'+to+handle+the+selected+element+here
}

$(".someSelector").each(function()+{
++++setTimeout(doSomething.bind(this),+0);
});|code-block|syntax|javascript|421687|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout^0|U|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

MDN has a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout" rel="nofollow">good example</a> on the use of setTimeout preserving "this".

Like the following:

<pre><code>function doSomething() {
 // use 'this' to handle the selected element here
}

$(".someSelector").each(function() {
 setTimeout(doSomething.bind(this), 0);
});
</code></pre>

blocks|key|636251|text|如果你想使用参数和调节异步函数的最大数量，你可以使用我构建的一个简单的异步工作者：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|636252|var+BackgroundWorker+=+function(maxTasks)+{
++++this.maxTasks+=+maxTasks+%7C%7C+100;
++++this.runningTasks+=+0;
++++this.taskQueue+=+[];
};

/*+runs+an+async+task+*/
BackgroundWorker.prototype.runTask+=+function(task,+delay,+params)+{
++++var+self+=+this;
++++if(self.runningTasks+>=+self.maxTasks)+{
++++++++self.taskQueue.push({+task:+task,+delay:+delay,+params:+params});
++++}+else+{
++++++++self.runningTasks+%2B=+1;
++++++++var+runnable+=+function(params)+{
++++++++++++try+{
++++++++++++++++task(params);
++++++++++++}+catch(err)+{
++++++++++++++++console.log(err);
++++++++++++}
++++++++++++self.taskCompleted();
++++++++}
++++++++//+this+approach+uses+current+standards:
++++++++setTimeout(runnable,+delay,+params);
++++}
}

BackgroundWorker.prototype.taskCompleted+=+function()+{
++++this.runningTasks+-=+1;

++++//+are+any+tasks+waiting+in+queue?
++++if(this.taskQueue.length+>+0)+{
++++++++//+it+seems+so!+let's+run+it+x)
++++++++var+taskInfo+=+this.taskQueue.splice(0,+1)[0];
++++++++this.runTask(taskInfo.task,+taskInfo.delay,+taskInfo.params);
++++}
}|code-block|syntax|javascript|636253|你可以这样使用它：|636254|var+myFunction+=+function()+{
+...
}
var+myFunctionB+=+function()+{
+...
}
var+myParams+=+{+name:+"John"+};

var+bgworker+=+new+BackgroundWorker();
bgworker.runTask(myFunction,+0,+myParams);
bgworker.runTask(myFunctionB,+0,+null);|636255|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you want to use Parameters and regulate the maximum number of async functions you can use a simple async worker I've build:

<pre><code>var BackgroundWorker = function(maxTasks) {
 this.maxTasks = maxTasks || 100;
 this.runningTasks = 0;
 this.taskQueue = [];
};

/* runs an async task */
BackgroundWorker.prototype.runTask = function(task, delay, params) {
 var self = this;
 if(self.runningTasks &gt;= self.maxTasks) {
 self.taskQueue.push({ task: task, delay: delay, params: params});
 } else {
 self.runningTasks += 1;
 var runnable = function(params) {
 try {
 task(params);
 } catch(err) {
 console.log(err);
 }
 self.taskCompleted();
 }
 // this approach uses current standards:
 setTimeout(runnable, delay, params);
 }
}

BackgroundWorker.prototype.taskCompleted = function() {
 this.runningTasks -= 1;

 // are any tasks waiting in queue?
 if(this.taskQueue.length &gt; 0) {
 // it seems so! let's run it x)
 var taskInfo = this.taskQueue.splice(0, 1)[0];
 this.runTask(taskInfo.task, taskInfo.delay, taskInfo.params);
 }
}
</code></pre>

You can use it like this:

<pre><code>var myFunction = function() {
 ...
}
var myFunctionB = function() {
 ...
}
var myParams = { name: "John" };

var bgworker = new BackgroundWorker();
bgworker.runTask(myFunction, 0, myParams);
bgworker.runTask(myFunctionB, 0, null);
</code></pre>

blocks|key|421843|text|下面是一个函数，它接受另一个函数并输出一个异步运行的版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|421844|var+async+=+function+(func)+{
++return+function+()+{
++++var+args+=+arguments;
++++setTimeout(function+()+{
++++++func.apply(this,+args);
++++},+0);
++};
};|code-block|syntax|javascript|421845|它被用作创建异步函数的简单方法：|421846|var+anyncFunction+=+async(function+(callback)+{
++++doSomething();
++++callback();
});|421847|这与@fider的答案不同，因为函数本身有自己的结构(没有添加回调，它已经在函数中)，还因为它创建了一个可以使用的新函数。|421848|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is a function that takes in another function and outputs a version that runs async.

<pre><code>var async = function (func) {
 return function () {
 var args = arguments;
 setTimeout(function () {
 func.apply(this, args);
 }, 0);
 };
};
</code></pre>

It is used as a simple way to make an async function:

<pre><code>var anyncFunction = async(function (callback) {
 doSomething();
 callback();
});
</code></pre>

This is different from @fider's answer because the function itself has its own structure (no callback added on, it's already in the function) and also because it creates a new function that can be used.

blocks|key|421950|text|除了@pimvdb给出的很好的答案之外，如果你想知道，async.js也没有提供真正的异步函数。下面是这个库的main方法的(非常)精简版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|421951|function+asyncify(func)+{+//+signature:+func(array)
++++return+function+(array,+callback)+{
++++++++var+result;
++++++++try+{
++++++++++++result+=+func.apply(this,+array);
++++++++}+catch+(e)+{
++++++++++++return+callback(e);
++++++++}
++++++++/*+code+ommited+in+case+func+returns+a+promise+*/
++++++++callback(null,+result);
++++};
}|code-block|syntax|javascript|421952|因此，该函数防止出现错误，并优雅地将其交给回调处理，但代码与任何其他JS函数一样同步。|421953|entityMap|0|LINK|mutability|MUTABLE|url|https://caolan.github.io/async/^0|R|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Next to the great answer by @pimvdb, and just in case you where wondering, <a href="https://caolan.github.io/async/" rel="nofollow noreferrer">async.js</a> does not offer truly asynchronous functions either. Here is a (very) stripped down version of the library's main method:

<pre><code>function asyncify(func) { // signature: func(array)
 return function (array, callback) {
 var result;
 try {
 result = func.apply(this, array);
 } catch (e) {
 return callback(e);
 }
 /* code ommited in case func returns a promise */
 callback(null, result);
 };
}
</code></pre>

So the function protects from errors and gracefully hands it to the callback to handle, but the code is as synchronous as any other JS function.

blocks|key|636534|text|在引入ES6之后，为了展示一个使用promises的简单解决方案，它处理异步调用要容易得多：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|636535|在新的promise中设置异步代码：|636536|var+asyncFunct+=+new+Promise(function(resolve,+reject)+{
++++$('#link').animate({+width:+200+},+2000,+function()+{
++++++++console.log("finished");++++++++++++++++
++++++++resolve();
++++});+++++++++++++
});|code-block|syntax|javascript|636537|注意在异步调用完成时设置resolve()。|636538|然后，在promise的.then()中添加要在异步调用完成后运行的代码：|636539|asyncFunct.then((result)+=>+{
++++console.log("Exit");++++
});|636540|下面是它的一个片段：|636541|$('#link').click(function+()+{
++++console.log("Enter");
++++var+asyncFunct+=+new+Promise(function(resolve,+reject)+{
++++++++$('#link').animate({+width:+200+},+2000,+function()+{
++++++++++++console.log("finished");++++++++++++	
++++++++++++resolve();
++++++++});+			
++++});
++++asyncFunct.then((result)+=>+{
++++++++console.log("Exit");++++
++++});
});|636542|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a+href="#"+id="link">Link</a>
Moving|636543|​|636544|或JSFiddle|636545|entityMap|0|LINK|mutability|MUTABLE|url|http://es6-features.org/#PromiseUsage|1|https://jsfiddle.net/hd84335/25onaa2w/^0|H|8|3|3|0|0|0|0|C|9|0|C|7|0|0|0|0|0|0|1|8|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1R|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1S|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1T|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1U|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|12|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]]]

Late, but to show an easy solution using <code>promises</code> after their introduction in <a href="http://es6-features.org/#PromiseUsage" rel="noreferrer">ES6</a>, it handles asynchronous calls a lot easier:

You set the asynchronous code in a new promise:

<pre><code>var asyncFunct = new Promise(function(resolve, reject) {
 $('#link').animate({ width: 200 }, 2000, function() {
 console.log("finished"); 
 resolve();
 }); 
});
</code></pre>

Note to set <code>resolve()</code> when async call finishes. 
Then you add the code that you want to run after async call finishes inside <code>.then()</code> of the promise:

<pre><code>asyncFunct.then((result) =&gt; {
 console.log("Exit"); 
});
</code></pre>

Here is a snippet of it:
<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>$('#link').click(function () {
 console.log("Enter");
 var asyncFunct = new Promise(function(resolve, reject) {
 $('#link').animate({ width: 200 }, 2000, function() {
 console.log("finished"); 	
 resolve();
 }); 			
 });
 asyncFunct.then((result) =&gt; {
 console.log("Exit"); 
 });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a href="#" id="link"&gt;Link&lt;/a&gt;
&lt;span&gt;Moving&lt;/span&gt;</code></pre>
</div>
</div>


or <a href="https://jsfiddle.net/hd84335/25onaa2w/" rel="noreferrer">JSFiddle</a>

Check out this <a href="http://jsfiddle.net/5H9XT/5/" rel="noreferrer">code</a> :

<pre><code>&lt;a href="#" id="link"&gt;Link&lt;/a&gt;
&lt;span&gt;Moving&lt;/span&gt;

$('#link').click(function () {
 console.log("Enter");
 $('#link').animate({ width: 200 }, 2000, function() {
 console.log("finished"); 
 }); 
 console.log("Exit"); 
});
</code></pre>

As you can see in the console, the "animate" function is asynchronous, and it "fork"s the flow of the event handler block code. In fact :

<pre><code>$('#link').click(function () {
 console.log("Enter");
 asyncFunct();
 console.log("Exit"); 
});

function asyncFunct() {
 console.log("finished");
}
</code></pre>

follow the flow of the block code!

If I wish to create my <code>function asyncFunct() { }</code> with this behaviour, how can I do it with javascript/jquery? I think there is a strategy without the use of <code>setTimeout()</code>
 ​

How can I create an Asynchronous function in Javascript?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

查看这个：<a href="#" id="link">Link</a>Moving$('#link').click(function () { console.log("Enter"); $('#link').animate({ width: 200 }, 2000, functi...

问如何在Javascript中创建异步函数？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Javascript中创建异步函数？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Javascript中创建异步函数？
EN