【JavaScript】条件を満たすまで待機する処理の書き方

 待っていれば条件を満たすことが期待される処理があり、条件を満たすことを待ちたいことがあります。具体的には複数ファイルでライブラリの JavaScript ファイルを扱う前提で、ライブラリ間での協調を行いたい時や複数のライブラリに依存する処理を作る時の事故回避に便利です。
 具体的なコードは次です。

/**
 * 条件が揃ったら resolve 関数を走らせる。
 * Promise や Proxy を使いこなせばもっとスマートに書けるかも
 * @param {Function} conditionCallback resolve が走るための真偽値を返す関数
 * @param {Function} resolve 条件が揃ったら走る関数
 * @param {Number} intervalMillSecond ポーリング間隔ミリ秒
 */
function waitAsync(conditionCallback, resolve,intervalMillSecond = 100){
  if(conditionCallback()){
    // 待つまでもなく成立しているパターン用
    resolve();
    return;
  }
  // 条件が成立するまで setInterval でポーリング的なループ
  const intervalId = setInterval(()=>{
    if(!conditionCallback()){
      // 条件関数が false を返した時はループ続行
      return;
    }
    // 条件関数が true を返した時はループ用の interval を消去
    clearInterval(intervalId);
    // 条件関数が true を返した時は resolve 関数を実行
    resolve();
  }, intervalMillSecond)
}

// 使用例
waitAsync(
  () => !!$('#search-modal').modal,// jQuery のモーダルライブラリが読み込めているならば true
  () => $('#search-modal').modal('show')// 読み込み終わったらモーダルを表示
);

 こんな風なコードを使うと CDN と組み合わせたりライブラリファイルを組み合わせてもローディングエラーを起こしにくいです。
 もっとも、待つ対象が Promise を返してくれるならこんな関数を使うよりも Promise を使った方がスマートです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG