36-Genertor函数

2019-11-05  本文已影响0人  早起的鸟儿

一、概述
Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。
二、格式

{
    let fn = function*(){
        return 111
    }
    console.log( fn().next() )  //{value: 111, done: true}
}

Generator函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是上一章介绍的遍历器对象(Iterator Object)。

下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield语句(或return语句)为止。换言之,Generator函数是分段执行的,yield语句是暂停执行的标记,而next方法可以恢复执行。

{
    let fn = function*(){
        yield 'a',
        yield 'b',
        yield 'c'
    }
    let f = fn()  //必须给一个变量不然重复调用第一次
    console.log( f.next() )  
    console.log( f.next() ) 
    console.log( f.next() ) 
}

什么时候会用到下一步,比如录入信息会遇到下一步下一步
举个🌰

//1.返回统计剩余次数
{
    let num = function (count) {
        console.log(`剩余${count}次`)
        //剩余4次
        //剩余3次
        //剩余2次
        //剩余1次
        //剩余0次
    }

    let res = function* (count) {
        while (count > 0) {
            count--;
            yield num(count)
        }
    }
    let start = res(5);
    let btn = document.createElement("button");
    btn.innerHTML = "抽奖";
    btn.id = "btn";
    document.body.appendChild(btn);
    document.getElementById("btn").addEventListener("click", function () {
        start.next()
    })
}
上一篇 下一篇

猜你喜欢

热点阅读