JavaScriptで外部関数が読み込まれた後に処理を実行する

javascript

JavaScriptは良い意味でも悪い意味でも自由度が高いです。

基本的にhtmlはソースの上から順に読み込んでいきますが、外部ファイルなどは取得にタイムラグが発生して処理実行時に必要な関数が見つからない場合が稀にあります。

 

そんなときに、外部関数が読み込まれたことを確認してから処理を実行するスクリプトを書いてみました。

ニッチすぎるのでどうかと思ったのですが、需要がありそうな気配がしたので記事にしてみます。

関数の存在チェック

typeof hoge == "function"

hogeというオブジェクトが関数かどうかを判定します。

関数が見つからない場合はhogeがundefinedなどになったりするので、trueが返ってくれば関数が存在する＝読み込まれたと判断できます。

関数が読み込まれたら処理を実行

function checkLoadScript() {
  if (typeof hoge == "function") {
    // 実行したい処理
    hoge();
  } else {
    setTimeout('checkLoadScript()', 100);
  }
}

先ほどの存在チェックを再帰的に呼び出し、読み込まれたら処理を実行してループを抜けます。

あまりスマートなやり方ではないですが、窮地の際にすがる藁くらいの一助にはなるといいなと思います。