3

JavaScript $ajax を使用していくつかのスクリプトを非同期でロードしています。特定の順序でロードする必要がありますが、現時点ではランダムです。

私が持っているコードは次のとおりです。

loadScripts();

function loadScripts() {
    getBootStrapperScript(function (callback) {            
      alert('bootStrapper loaded');
    })

    getXMLScript(function (callback) {       
        alert('xml script loaded');
    });

    getFormScript(function (callback) {       
        alert('form script loaded');
    });       
}

function getBootStrapperScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/bootStrapper.js",
        dataType: "script"
    }).done(callback); 
}

function getXMLScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/LoadXML.js",
        dataType: "script"
    }).done(callback);
}

function getFormScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/LoadForm.js",
        dataType: "script"  
    }).done(callback);
}

このjsFiddleで実行されていることがわかります

スクリプトが定義された順序で確実に読み込まれるようにする、洗練された方法はありますか?

4

6 に答える 6

8 
function loadScripts(urls, callback) {
    var i = 0;
    (function loadNextScript() {
         if (i < urls.length) {
              $.getScript(urls[i][0]).done(function() {
                  alert(urls[i][1] + " loaded");  // probably remove in production
                  ++i;
                  loadNextScript();
              });
         }
         else if (callback) callback();
    })();
}

loadScripts([
    ["http://localhost/eSales/scripts/bootStrapper.js", "bootstrapper script"],
    ["http://localhost/eSales/scripts/LoadXML.js", "xml script"],
    ["http://localhost/eSales/scripts/LoadForm.js", "form script"]
], function() { alert('done'); });
于 2012-11-29T16:40:22.370 に答える
2

$.getScript()jQuery遅延オブジェクトを返すので、そのように使用できます

$.getScript("firstScript").done( function( ) {
    $.getScript("secondScript").done( function( ) {
        $.getScript("thirdScript").done( function( ) {
            alert("scripts loaded");
        });
    });
});

ここでフィドル

于 2012-11-29T16:38:44.260 に答える
2

関数を事前に定義し、コールバックとして渡すことで次々と実行します。これは、次のものに渡す前にそれぞれをロードする必要があるため機能します。そのため、応答時間はもはや問題になりません。

于 2012-11-29T16:23:44.953 に答える
2

他のコールバックで次の ajax 関数を呼び出すことができます

getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getFormScript(function (callback) {       
        alert('form script loaded');
    });
})
于 2012-11-29T16:24:00.503 に答える
0

できることは、各呼び出しが完了するたびに変数に割り当ててから、次のようにすることです。

var script1, script2, script3;

var init = function() {

    if (script1 && script2 && script3)
    {
        // now inject scripts in order
    }

};

function getBootStrapperScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/bootStrapper.js",
        dataType: "script"
    }).done(function(data) { 
        script1 = data; 
        init(); 
    }); 
}

// Do your other two calls in similar fashion

init() は、すべてのスクリプト変数が割り当てられた場合にのみ if ステートメントを実行し、ページに挿入される順序を選択できます。

編集：他の回答が示唆しているように、呼び出しを連鎖させるのは間違っています。これにより、読みやすさとパフォーマンスが低下します。

EDIT2: 要件は、スクリプトがメモリに順番にロードされることだけです...サーバーから順番にダウンされることではありません。

于 2012-11-29T16:25:39.293 に答える
0

特定の順序を確保するために、コールバック内にそれらをロードすることができます。これは乱雑に見えますが

function loadScripts() {
  getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getXMLScript(function (callback) {       
       alert('xml script loaded');
       getFormScript(function (callback) {       
         alert('form script loaded');
       });       
    }); 
  })
}
于 2012-11-29T16:25:00.047 に答える