时间:2021-05-26
本文实例讲述了JS Generator 函数的含义与用法。分享给大家供大家参考,具体如下:
读阮一峰老师《Generator 函数的含义与用法》总结
老师的文章通俗易懂,但是我个人理解上面有一些差,所以看了几遍之后才有呢么一点点体会
把它记录下来。
还是那句话,所有事物的出现都是为了解决对应的问题。
那么Generator出现是为了解决什么问题的呢?
在异步编程的场景下,如果有多个异步任务,如何处理他们的先后执行顺序?
举一个常见的例子,jquery的ajax请求,每一个success都是一个异步任务。
那么问题来了,如果我要保证页面渲染要在5个网络请求都回来之后再去渲染页面。
我们的代码就会变成:
$.ajax({...success:function(data){ $.ajax({...success:function(data){ $.ajax({...success:function(data){ $.ajax({...success:function(data){ $.ajax({...success:function(data){ //do something }}) }}) }}) }})}})这就是”回调函数噩梦”(callback hell)
为了解决这个问题,后来出现了Deferred和promise
两者区别不大,通过一种包装写法来减少回调函数
上面的ajax就可以写成:
ajax1 = $.ajax({...success:function(data){});ajax2 = $.ajax({...success:function(data){});ajax3 = $.ajax({...success:function(data){});ajax4 = $.ajax({...success:function(data){});ajax5 = $.ajax({...success:function(data){});$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function( //do something)).then(function(){ //do something2})1.8版本以上的jquery ajax模块默认返回Deferred对象
Deferred和promise将回调函数做拆分,将异步任务的处理和执行分成两部分完成
他们最大的问题就是代码冗余,包装之后的代码都需要通过then,done来执行后面的内容,也导致层次感不清晰
那有没有一种比较无感,简单的写法呢?
那就是协程,
我之前也是在这个地方困惑了很久,
前面说的大多日常用到过,也清楚一些原理,
关于协程用到的就少了,我们来分析下吧。
直接看一下协程的例子:
function asnycJob() { // ...其他代码 var f = yield readFile(fileA); // ...其他代码}阮一峰老师的原话:
上面代码的函数 asyncJob 是一个协程,它的奥妙就在其中的 yield 命令。它表示执行到此处,执行权将交给其他协程。也就是说,yield命令是异步两个阶段的分界线。 协程遇到 yield 命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点,就是代码的写法非常像同步操作,如果去除yield命令,简直一模一样。
之前没理解的原因就是没好好读这两句话,今认真看了一下,茅塞顿开。重要的有这么几点
首先asnycJob这个方法就是一个协程
yield相当于return,会返回当前程序的执行状态
当执行到yield,程序挂起等待返回后继续执行。
挂起这段时间去执行其他协程函数
Generator函数是ES6对协程函数的实现,
Generator函数的特点就是可以暂停代码执行。
跟协程函数一样,遇到yield关键字就暂停代码执行,
跟普通函数的区别在于Generator函数不会反悔结果,而是返回指针对象,
通过指针的next方法移动指针指向下一个yield关键字位置。
也就是说Generator函数的分阶段执行是由next方法控制的。
使用了Generator函数之后会对我们的代码有多大的改变呢?
fangction* gen(){ var url = 'user/get/info'; var data = yield $.get({url:url}); console.log(data.userName);}你不需要担心远程接口的返回时机,完全按照同步的方式写代码就行。
但是也有缺点,Generator函数把一步操作做的很简洁,但对流程的管理却不方便,
上面的例子如何执行?
var g = gen();g.next();g.next();next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,
表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;
done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。
你需要执行两次.next方法,来将你的Generator函数执行完毕。
关于如何自动化异步任务的流程管理,就需要co,thunk,async的帮助了
原文:Generator 函数的含义与用法
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JSThunk函数的含义和用法。分享给大家供大家参考,具体如下:前面我们已经学习过了Generator函数的优势和使用场景。这篇文章我们继续学习阮
本文实例讲述了python中Genarator函数用法。分享给大家供大家参考。具体如下:Generator函数的定义与普通函数的定义没有什么区别,只是在函数体内
本文实例讲述了JS回调函数基本定义与用法。分享给大家供大家参考,具体如下:初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数。我们先来看看回
本文实例讲述了JSasync函数的含义和用法。分享给大家供大家参考,具体如下:学习老师最后一篇文章并做总结,前面我们认识了各种异步编程方式:回调函数,Promi
本文实例讲述了JS函数基本定义与用法。分享给大家供大家参考,具体如下:js函数//三种函数的声明方法//functiontest1(a1,a2){//conso