基于javascript的异步编程示例的详细说明

本文说明了基于javascript的异步编程。分享给大家参考，如下：

术语异步函数有点名不副实。调用函数后，程序只能在函数返回后才能继续。如果JavaScript程序员异步调用一个函数，这意味着这个函数将导致另一个函数在将来运行，这个函数取自事件队列。如果后一个函数作为参数传递给前一个函数，则称为回调函数。

回收

回调函数是异步编程最基本的方式。

这样我们就把同步操作变成了异步操作，主函数不会阻塞程序的运行，相当于先执行程序的主逻辑，耽误了耗时的操作。

回调函数的优点是简单，易于理解和部署，缺点是不利于代码的读取和维护。

我们定义了一个延迟函数，它是异步的，也就是说它会延迟指定函数的执行，这样当前正在执行的程序就会继续执行。功能延迟如下：

函数延迟(时间，回调){ setTimeout(函数(){回调(' sleed for ' time)；}，时间)；}如果我必须延迟两次呢？

延迟(1000，函数(msg){ console . log(msg)；延迟(1200，函数(msg){ console . log(msg)；}})//.等待1000毫秒/“休眠1000分钟”//.再等待1200ms//'休眠1200 '只有这样才能保证两个延迟逐个执行。如果有更多级别呢？会形成回调地狱。当异步任务较多时，维护大量回调将是一场灾难。

承诺

Promise是一个包含在ES6中的规范，所有的框架都已经实现了相关的方法。

承诺可以理解为承诺。如果A给B打电话，B给A回承诺，那么A在写计划的时候可以写这个。当B返回结果时，A将执行方案1。如果B没有返回A想要的结果，A将执行方案2。这样，所有潜在风险都在a的可控范围内。

让我们看一下ES6中promise的用法示例：

使用“严格”；var promiseCount=0；函数test promise(){ var thisspromisecount=promiseCount；var log=document . getelementbyid(' log ')；log . insertadjacenthtml(' before end '，this promisecount ')Started(small sync代码Started/small)br/')；//我们创建一个新的Promise，并期望在3秒内得到结果varp1=newPromise当Promise被解析或拒绝时，这个函数被称为function (resolve，reject){ log . insertaccesstml(' before end '，thisspromisecount ')Promise started(small async code started/small)br/')；//创建异步操作窗口。settimeout(函数(){//Summit PromiseSolve(this spromisecount)；}，math . random()* 2000 1000)；});//当Promise满足时，p1.then(//输出信息和值函数(val) {log。insertajacenthtml(' end前'，val ')承诺已实现(小异步代码终止/小)br/')已执行。}) .catch(//执行函数(原因){console.log('处理被拒绝的Promise '(原因')在此处));});log . insertadjacenthtml(' before end '，thisPromiseCount ')做出的承诺(smallSync代码已终止/small)br/')；}快速连续执行功能，得到结果：

解释在异步操作1和2之后完成正常的序列执行。有关Promise的更多详细用法，请参考MDN

很多框架也提供Promise相关的方法，这里我们以jQuery为例。

$(“按钮”)。bind('click '，function() { $('p '))。追加('已开始.');$(“div”)。每个(函数(i ) { $(this))。fadeIn()。fade out(1000 *(I ^ 1))；});$(“div”)。承诺()。done(function() { $('p '))。追加('完成！');});});您可以看到，当$('div ')的所有任务完成时，将调用最后完成的操作。

Jquery中的Promise也可以表示多个结果，当出现不同的结果时会调用相应的回调。让我们以ajax调用为例。在1.5之前的版本中，代码必须按如下方式编写：

$.get('/getdata '，{ success:onSuccess，failure:onFailure，always : onalway })；1.5版本引入Promise对象后。可以这样写：

var promise=$。get('/get data ')；承诺完成(成功)；许诺。失败(失败)；承诺。永远(方式)；那么这种改变有什么好处呢？为什么触发ajax调用后我还要附加回调？如果ajax想要达到很多效果，比如触发动画、插入html、锁定输入等。仅由负责发出请求的应用程序代码来处理所有这些影响显然是愚蠢的。只通过一个承诺是很优雅的。

有关更多详细信息，请参考jquery

诺言是优雅的，但它只解决了回调地狱的问题。真正简化javascript异步编程的是生成器。

发电机

生成器是ES6中的语法。

什么是发电机？让我们先看看下面的代码：

function * quips(name){ yield ' hello ' name '！'；屈服于“我希望你喜欢博文”；如果(name . starts with(' X '){ yield '你的名字以X开头很酷，name；}屈服“回头见！”；}你没看错，这是javascript代码。和你曾经知道的javascript有区别吗？这个函数被称为生成器函数。生成器函数看起来是不是有点像普通函数？

它们的不同之处如下：

通用函数从函数开始，而生成器函数从函数*开始。

生成器函数中的一个特殊关键字是yield，用于暂停函数。用下一个方法调用可以达到一步一步执行函数的目的。

让我们看看下一种方法的用法：

var iter=妙语(' jorendorff ')；[对象生成器]ITER . next(){ value : ' hello jorendorff！'，done : false } ITER . next(){ value : '希望你喜欢这篇博文'，done : false } ITER . next(){ value : '回头见！'，done: false} iter。next () {value: undefined，done3360 true}可以看出，生成器函数执行到下一个方法之后的下一个屈服位置。

让我们解释一下如何用生成器函数替换回调函数。让我们以初始延迟为例。

首先，我们需要定义一个生成器：

函数* mydelayedmessages () {/*延迟1000毫秒并打印结果*/*延迟1200毫秒并打印结果*/}然后我们需要设置执行指定操作的延迟时间，现在我们暂时将其设置为空函数。

function * myDelayedMessages(){ console . log(delay(1000，function(){ }))；console.log(延迟(1200，function(){ })；}然后我们使用yield关键字：

function * myDelayedMessages(){ console . log(yield delay(1000，function(){ }))；console.log(yield delay(1200，function(){ })；}然后我们需要指定一个函数运行来调用生成器函数的下一个方法，并将null函数更改为参数resume:

函数运行(generator function){ var generator=generator function(resume)；函数resume(callback value){ generator . next(callback value)；} generator . next()}最终执行代码如下：

run(function * myDelayedMessages(resume){ console . log(yield delay(1000，resume))；console.log(产量延迟(1200，恢复))；})//.wait 1000 ms/“睡了1000分钟”//.waits1200ms/“睡了1200”，完美避免了回调地狱！

关于JavaScript的更多信息，请看本网站专题：《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》。

希望本文对JavaScript编程有所帮助。