博客 / 詳情

返回

使用Generator函數實現異步任務隊列

var genAsyncTask2 = (val, time) => {
      return () => {
        return new Promise(function (resolve, reject) {
          let timer = setTimeout(() => {
            clearTimeout(timer);
            resolve(val);
          }, time);
        });
      }
    }
  
    // 任務隊列
    var taskArr = [
      genAsyncTask2('第1個異步任務,時間為2秒', 2000), genAsyncTask2('第2個異步任務,時間為1秒', 1000),
      genAsyncTask2('第3個異步任務,時間為0.8秒', 800), genAsyncTask2('第4個異步任務,時間為2.5秒', 2500)
    ];
  
  
    function *genFun(taskArr){
      for(let i = 0 , len = taskArr.length; i < len; i++){
        yield taskArr[i]().then(res => {
          console.log('genSync', res);
          return res;
        });
      }
    }
  
    /**
     * 自動執行generate函數的next,並保證執行順序
     * @param generateFn generate函數
     * @param params 執行generate函數所需參數
     */
    function generateAutoExec(generateFn, ...params) {
      var g = generateFn(...params);
  
      var next = function (res) {
        if (res.done || typeof res.value == 'undefined') return res.value;
        res.value.then((data) => {
          console.log('data', data);
          next(g.next(data));
        }).catch((err) => {
          console.error(err);
          next(g.throw(err));
        });
      }
  
      next(g.next());
    }
  
    generateAutoExec(genFun, taskArr);
user avatar webxejir 頭像 tingzhong666 頭像 mrqueue 頭像 yangkaiqiang 頭像 dashan_5c230d1ae1f9e 頭像 _bleach 頭像 zpfei 頭像 xiaodaigua_ray 頭像 jiaozheng 頭像 geoffzhu 頭像 carloslab 頭像 liuxuan_5845129fbf248 頭像
25 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.