1.  
  1. {
  2. // 长轮询
  3. let ajax=function* (){
  4. yield new Promise(function(resolve,reject){
  5. setTimeout(function () {
  6. resolve({code:0})
  7. }, 200);
  8. })
  9. }
  10.  
  11. let pull=function(){
  12. let genertaor=ajax();
  13. let step=genertaor.next();
  14. step.value.then(function(d){//step.value就是promise实例
  15. if(d.code!=0){
  16. setTimeout(function () {
  17. console.info('wait');
  18. pull()
  19. }, 1000);
  20. }else{
  21. console.info(d);
  22. }
  23. })
  24. }
  25.  
  26. pull();
  27. }
  1.  
  1. Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)
    参考链接:
    http://www.ruanyifeng.com/blog/2015/04/generator.html
    {
  2. // genertaor基本定义 有一个星号有一个yield
  3. let tell = function*() {
  4. yield 'a';
  5. yield 'b';
  6. return 'c'
  7. };
  8.  
  9. let k = tell();
  10.  
  11. console.log(k.next()); // {value: "a", done: false}
  12. console.log(k.next()); // {value: "b", done: false}
  13. console.log(k.next()); // {value: "c", done: false}
  14. console.log(k.next()); // {value: undefined, done: true}
  15. }
  16.  
  17. {
  18. let obj = {};
  19. obj[Symbol.iterator] = function*() {
  20. yield 1;
  21. yield 2;
  22. yield 3;
  23. }
  24.  
  25. for (let value of obj) {
  26. console.log('value', value); // 1 2 3
  27. }
  28. }
  29.  
  30. {
  31. let state = function*() {
  32. while (1) {
  33. yield 'A';
  34. yield 'B';
  35. yield 'C';
  36. }
  37. }
  38. let status = state();
  39. console.log(status.next()); //{value: "A", done: false}
  40. console.log(status.next()); //{value: "B", done: false}
  41. console.log(status.next()); //{value: "C", done: false}
  42. console.log(status.next()); //{value: "A", done: false}
  43. console.log(status.next()); //{value: "B", done: false}
  44. }
  45.  
  46. // {
  47. //需要一些插件才能实现,结果跟上面一样
  48. // let state=async function (){
  49. // while(1){
  50. // await 'A';
  51. // await 'B';
  52. // await 'C';
  53. // }
  54. // }
  55. // let status=state();
  56. // console.log(status.next());
  57. // console.log(status.next());
  58. // console.log(status.next());
  59. // console.log(status.next());
  60. // console.log(status.next());
  61. // }
  62.  
  63. {
  64. let draw = function(count) {
  65. //具体抽奖逻辑
  66. console.info(`剩余${count}次`)
  67. }
  68. let residue = function*(count) {
  69. while (count > 0) {
  70. count--;
  71. yield draw(count);
  72. }
  73. }
  74. let star = residue(5); //次数后台传
  75. let btn = document.createElement('button');
  76. btn.id = 'start';
  77. btn.textContent = '抽奖';
  78. document.body.appendChild(btn);
  79. document.getElementById('start').addEventListener('click', function() {
  80. star.next();
  81. }, false)
  82. }

es6 语法 (Generator)的更多相关文章

  1. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  2. es6语法重构react代码

    1.使用React.Component创建组件,需要通过在constructor中调用super()将props传递给React.Component.另外react 0.13之后props必须是不可变 ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  5. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  6. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  7. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  8. ES6语法的学习与实践

    ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...

  9. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  10. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

随机推荐

  1. maven安装和四大特性

    一.安装配置maven 官网下载:http://maven.apache.org/download.html 1:解压后放在一个固定的位置 2:配置环境变量,具体如下 新建系统环境变量:MAVEN_H ...

  2. H5内联视频总结

    概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...

  3. os模块及其API&属性

    模块: os os.path 所包含API列表: os.uname: 获取详细的系统信息 os.rename: 文件重命名 os.remove: 删掉文件 os.mkdir: 创建一个目录 os.rm ...

  4. [P5172] Sum

    "类欧几里得算法"第一题 sum [题意] 给入\(n,r\),求\(\sum_{d=1}^n(-1)^{\lfloor d\sqrt r \rfloor}\). [分析] 只需要 ...

  5. 解决添加codova plugin 编译出现问题:Execution failed for task ':processDebugManifest'.

    问题背景: ionic3项目上,添加cordova-plugin-cszbar,编译运行在android平台上 ,结果编译不成功.出现以下问题. Element uses-feature#androi ...

  6. 设置Firefox(火狐)浏览器的中文菜单/界面

    步骤一: 设置Firefox浏览器的中文菜单/界面.首先需要查一下正在使用的火狐版本号(小生使用的火狐版本是55.0.3).      步骤二: 下载对应版本的xpi中文插件 其次,访问下面的火狐官方 ...

  7. SharePoint如何配置Ipad跳转等问题

    如何配置Ipad跳转 Apple iPad 设备上不支持 SharePoint 标准视图.用户可以改用移动视图在 iPad 设备上查看 SharePoint 内容.默认情况下,iPad 用户被重定向到 ...

  8. Java设计模式学习记录-状态模式

    前言 状态模式是一种行为模式,用于解决系统中复杂的对象状态转换以及各个状态下的封装等问题.状态模式是将一个对象的状态从该对象中分离出来,封装到专门的状态类中,使得对象的状态可以灵活多变.这样在客户端使 ...

  9. ORA-28002:the password will expire within 6 days

    1.查看用户的proifle SELECT username,PROFILE FROM dba_users; 2.查看指定概要文件(如default)的密码有效期设置:SELECT * FROM db ...

  10. C# 反射Reflection Assembly

    反射反射程序员的快乐 一:什么叫反射 反射:是.net framework提供的一个访问metadata的帮助类,可以获取信息并且使用 反射的优点:动态 反射的缺点:1:稍微麻烦  2:能避开编译器的 ...