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. 6(计算机网络) 交换机与VLAN

    拓扑结构是怎么形成的? 我们常见到的办公室大多是一排排的桌子,每个桌子都有网口,一排十几个座位就有十几个网口,一个楼层就会有几十个甚至上百个网口.如果算上所有楼层,这个场景自然比你宿舍里的复杂多了.具 ...

  2. partition_show , a new version to check partition table status in sqlserver

    Dear all: I had put "partition_show" before . but this time it makes faster. partition_sho ...

  3. JS array delete splice 区别

    Delete in this case will only set the element as undefined: > myArray =['a','b','c','d'] >dele ...

  4. Write-up-Bulldog2

    关于 下载地址:点我 哔哩哔哩:哔哩哔哩 信息收集 网卡:vboxnet0,192.168.56.1/24,Nmap扫存活主机发现IP为192.168.56.101 ➜ ~ nmap -sn 192. ...

  5. list.OfType()

    将两个类型不同是实体存入到一个object可以通过OfType方法分别取出来 //将两个类型不同是实体存入到一个object可以通过OfType方法分别取出来 List<Phone> Ph ...

  6. 「CSP-S」2019年第一届Day1游记+题解

    「CSP-S」2019年第一届Day1游记+题解 Day 1 7:30 A.M. 8:10 A.M. 8:30 A.M. T1 格雷码 题目 考场经历+思考(正解) 8:50 A.M. T2 括号树 ...

  7. 【剑指Offer面试编程题】题目1348:数组中的逆序对--九度OJ

    题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 输入: 每个测试案例包括两行: 第一行包含一个整数n,表示数组 ...

  8. Red_Hat yum源配置

    http://www.linuxidc.com/Linux/2016-06/132171.htm

  9. 「AT1983 BBQ Hard」

    呦,来一次久违的BBQ吧! AT题...日本的题库质量一向很高 这题是有关组合数的DP... 前置芝士 快速计算组合数,具体还是自行百度. 膜域下的除法. 具体做法 题目中的问题: \(\sum_{i ...

  10. MariaDB——数据库集群

    Mariadb数据库集群 mariadb主从 主从多用于网站架构,因为主从的同步机制是异步的,数据的同步有一定的延迟性,也就是说可能会导致数据丢失,但是性能比较好,因此网站大多数 用的是主从架构的数据 ...