Promise Queue

promise-queue.md

非同期処理を含むイベントが連続で発火されて、それを、同期に実行したい（発火された順番で必ず前の処理が終わってから実行したい）時に使えるテクニック。めちゃめちゃに実行される非同期処理を一列に整列させるイメージです。

var promises = [];
promises.push(Promise.resolve());

promises.push(
  promises.shift().then(() => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, Math.floor( Math.random() * 301 ))//0~300までの乱数を生成
    });
  })
);

確認用コード

var promises = [];
promises.push(Promise.resolve());

function execute(index){
  promises.push(
    promises.shift().then(function(){
      return new Promise(function(resolve){
        setTimeout(function(){
          console.log(index);
          resolve();
        }, 300 - (index * 3))//最初の方ほどTimeoutを長くする
      });
    })
  );
}

for(var i=0; i<100; i++){
  execute(i);
}

このコードを実行して、consoleに表示されるindexが順番になってれば問題ないはず。

ちなみに、ProimseはIE（全バージョン！！）にはないのでPolyfillする必要があります。IEまたお前か！！ 😡