js generator的兩個實際應用

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