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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
js实现楼层导航功能
Feb 23 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
全面分析JavaScript 继承
May 30 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php简单统计在线人数的方法
2016/05/10 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
团员的自我评价
2013/12/01 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
海洋天堂观后感
2015/06/05 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
七年级作文之冬景
2019/11/07 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
PHP RabbitMQ消息列队
2022/05/11 PHP