JS Generator 函数的含义与用法实例总结


Posted in Javascript onApril 08, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 #Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
如何用JQuery进行表单验证
2013/05/29 面试题
女方回门宴答谢词
2014/01/14 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
酒后驾车标语
2014/06/30 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android