generator在抽奖中的应用

Posted 2022-02-20 wjyz

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();