[js] 指定したPromiseが解決されるまでローディング表示

概要

Promiseを渡すとそれが解決されるまでローディング表示をする関数を実装する。

ローディング関数の仕組み

1. 最初にローディング表示する
2. 渡されたPromiseが解決されたらローディング表示を解除する

Promiseの解決を検知する方法

渡されたPromiseに対してthenメソッドを呼び出すことでPromiseが解決されたことを検知できる。

promise.then(() => console.log('解決された'))

実装

function loading(promise) {
  let i = 0;
  const interval = setInterval(() => {
    showLoading(((++i) % 3) + 1);
  }, 500);
  promise.then(() => {
    clearInterval(interval);
    endLoading();
  });
}

デモ