待っていれば条件を満たすことが期待される処理があり、条件を満たすことを待ちたいことがあります。具体的には複数ファイルでライブラリの JavaScript ファイルを扱う前提で、ライブラリ間での協調を行いたい時や複数のライブラリに依存する処理を作る時の事故回避に便利です。
具体的なコードは次です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /** * 条件が揃ったら 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 を使った方がスマートです。
