generator作为一个用来操作异步的状态机, 遇到yield停止, 通过调用next()来继续操作。  今天就用generator来举例两个实际开发中的应用。

1,抽奖

function draw(count) {      //抽奖模拟
setTimeout(function(count){
console.log(`还剩余${count}次机会!`);
}, 1000);
} function generatorDraw(count) { // 生成generator函数
while(count > 0) {
count --;
yield draw(count);
}
} let beginDraw = generatorDraw(3); // 这个3一般是从服务端获取 开始调用; const btn = document.createElement('button');
btn.innerText = '抽奖';
btn.addEventListener('click', function(){
beginDraw.next();
})
document.body.addpendChild(btn);

这样通过 每次点击按钮就调用一次next 来实现次数的递减,当然抽奖的逻辑每次都会执行, 当然你也可以在每次执行逻辑的时候, 让按钮禁止点击。这样就更加严谨一点。

2,长轮询

以前的长轮询都是通过定时器来不断的访问给定的接口。 鉴于现在的浏览器对websocket的支持已经很好了,所以大部分都可以直接使用websocket,  但可以通过这个来模拟一下使用generator的思路。

function *ajax() {    // 模拟ajax请求
yield new Promise((resolve, reject) => {
setTimeout(function () {
resolve({code :0});
}, 200)
})
} function pull() {
let generator = ajax();
let step = generator.next();
step.value.then( res => {
if (res.code !== 0) { // 通过获得的数据和前一次的想比较,如果相同就继续轮询,不同的话就输出
setTimeout(function () {
console.log(`数据没有更新,继续轮询`);
pull();
}, 1000)
} else {
console.log(res);
}
})
} pull();

js generator的两个实际应用的更多相关文章

  1. js中计算两个日期之差

    js中计算两个日期之差            var aBgnDate, aEndDate;            var oBgnDate, oEndDate;            var nYl ...

  2. js前台计算两个日期的间隔时间

    js前台计算两个日期的间隔时间(时间差)原创 2017年08月28日 16:09:43 标签:javascript 1144在后台传来两个时间字段,从中解析出两个字符串类型的日期格式 需要在前台解析出 ...

  3. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

  4. JS组件系列——两种bootstrap multiselect组件大比拼

    前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...

  5. js generator数据类型

    1. 概述 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), ...

  6. JS小数位保留两位小数--toFixed()

    parseInt,parseFloat,parseDouble在JS中是将值转换成相应的类型: 你必须要这样,才能实现: <script>         alert(parseFloat ...

  7. 自己用js写的两个日历控件

    前一阵写了两个日历控件,做了简单的封装,发出来共朋友们参考. 第一个日历控件,条状的日历. (使用方法:调用initBarTime(id,evn),第一个参数是要渲染div的id,第二个参数是点击日期 ...

  8. js中关于两个变量的比较

    今天在匆忙的写代码过程中,测试突然跑过来跟我说,有一个小的bug,但是不能完全的复现,但确实存在.需要我们这边参与查找.首先来说一下我们这个的业务逻辑,其实非常的简单,就是一个开房间的后台,里面有一项 ...

  9. js为什么返回两个对象字符串 objcet objcet ?

    js中两个使用 toString() 对有个有对象的数组进行操作时,为什么返回两个对象字符串 objcet objcet ? [{}].toString(); 返回 "[object Obj ...

随机推荐

  1. 收藏 40 2 CPD (广告合作方式)

    CPD,Cost per day的缩写,意思是按天收费,是一种广告合作方式. 在实际的广告合作中根据行业不同还包括Cost per Download的缩写含义,意思是依据实际下载量收费.   “CPD ...

  2. 技术|Android安装包极限优化

    版权声明 1.本文版权归原作者所有,转载需注明作者信息及原文出处. 2.本文作者:赵裕(vimerzhao),永久链接:https://github.com/vimerzhao/vimerzhao.g ...

  3. Pandas 用法汇总

    一.生成数据表 1.首先导入pandas 库,一般会用到 numpy 库,所以我们先导入备用: import numpy as np import pandas as pd 2.生成 CSV 或者 x ...

  4. Linux设备驱动的软件架构思想

    驱动相关:硬件之上的软件层,负责底层硬件与用户程序的交互 设备相关:底层设备的硬件操作 总线:匹配设备和驱动     设备驱动分层的思想:为同一类设备设计一个框架,而框架中的核心层则实现了该设备的一些 ...

  5. JSON对象和字符串的收发(JS客户端用typeof()进行判断非常重要)

    Ajax前台向后台传递对象: 数据准备 将js对象或者json对象转换为json字符串在Ajax传递,在后台中再将json字符串转换为json对象,再转换为java对象或在前端和后端构造一样的数据结构 ...

  6. Linux CentOS7 VMware 文件和目录权限chmod、更改所有者和所属组chown、umask、隐藏权限lsattr/chattr

    一.文件和目录权限chmod u User,即文件或目录的拥有者:g Group,即文件或目录的所属群组:o Other,除了文件或目录拥有者或所属群组之外,其他用户皆属于这个范围:a All,即全部 ...

  7. hadoop常用的操作指令

    -help:查看帮助 hadoop fs -help rm -rm [-f] [-r|-R] [-skipTrash] <src> ... : Delete all files that ...

  8. iScroll.js的用法

    概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一 ...

  9. 「USACO5.4」奶牛的电信Telecowmunication

    传送门 Luogu 解题思路 题目要求的是最小割点集,考虑用最小割来做. 所有边容量为1,直接求最小割? 这样肯定会出错,比如这种情况: 从最左边的点到最右边的点的最小割为2,但是答案是1,只要破坏中 ...

  10. IOS pin约束问题 存在间隙

    今天在为自己的view添加约束 对比以前添加的约束时,发现有有两层淡红色线框一条实线和一条虚线,而以前一个demo中添加的则只有一个蓝色实线框. 今天添加的约束如图1所示: 图1 而以前添加约束如图2 ...