onLoad系のイベントをPromise化する

onLoad系のイベントとPromiseは、相性が良いのではないかと思い始めました。

onLoad系のイベントをそのまま使うと

onloadやDOMContentLoadedを筆頭に、JavaScriptの世界には「ロード完了時に」何かを実行するようなイベントがあります。ただ、そのままイベントにセットしようとすると「すでに終了済みだった」というような事態が発生することがあります。

また、「複数の条件が満たされてから実行したい」ということがあるかもしれません。

Promise化するメリット

このような状況にも、Promiseなら柔軟に対応できます。

• 遅れてのセット…Promise#thenはresolve前でもresolve後でも問題なく動く
• Promiseはデフォルトで非同期実行
• 複数の条件…Promise.allで取れる

例えば、DOMContentLoadedをPromise化してみると、以下のようになります。

const promise = new Promise(resolve => {
  const fire = () => {
    resolve();
    document.removeEventListener('DOMContentLoaded', fire, false);
  };
  document.addEventListener('DOMContentLoaded', fire, false);
});

このpromiseにthenしていけば、「まだDOMContentLoadedしていなければ、それまで待つ」「すでにDOMContentLoadedしていれば、その場で非同期実行」というような挙動となります。