外部スクリプトがロードされるまで残りのコードを実行しないでください

Question

私は小さなブックマークレットスクリプト（1つは大きなIIFE）で作業しています。このスクリプトは、jQueryを含むページ用に作成されたもので、jQueryを広く使用しています。

私たちは現在、いくつかの製品でjQueryから離れ始めていますが、同じ方法でこのブックマークレットを使用する必要があります。

ブックマークレットを更新して、ページにjQueryが存在するかどうか最初に確認します。

jQueryの場合、通常どおり実行します。

！jQuery（jQuery（AJAX））をダウンロードした後、残りのスクリプトを実行します。

問題は、IIFEの内部でこれを行う方法がわかりません。スクリプトをフェッチするのは非同期アクションなので、スクリプトを続行する前にjQueryがダウンロードされていることを確認するにはどうすればよいですか？これは..私はこれまで持っているもので、これはbookmarketをであるから、それは負荷が/レンダリング後のページに注入し、それが頭の中で高いjQueryのスクリプトブロックを配置するのと同じくらい簡単ではありませんされることを

(function() { 
    var continueExec = true; 
    if (!window.jQuery) { 
     continueExec = false; 
     var s = document.createElement('script'); 
     s.onload = function() { 
      continueExec = true; 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } 
     // .. now I want to be able to use jQuery here. What do I need to change? 
     // $('.className')... 
})() 

ノート。

Answer 1

JavaScriptでは、非同期操作を処理するコールバックが必要です。我々は2つのシナリオのために、このようなコールバックを実行することができ、あなたの例では

：
a）はjQueryのは、すでに
Bを定義している）jQueryのは、だから、私たちはあなたのコードは少し変えダウンロードして

を使用する準備ができたとメインアプリケーションを含むIIFEにコールバックを渡し、両方のシナリオでコールします。

(function (callback) { 
    if (!window.jQuery) { 
     var s = document.createElement('script'); 
     s.onload = function() { 
      // Start the main application once jQuery was load: 
      callback(window.jQuery); 
     }; 
     s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     document.head.appendChild(s); 
    } else { 
     // Start the main application directly as jQuery is already part of the page: 
     callback(window.jQuery); 
    } 
})(function($) { 
    // The main application 
    // 
    // here you can use 
    // $('.className')... 
});