Question

我需要一个快速的方法来为单页应用程序加载所需的js文件。

例如，有5个js文件相互依赖。

现在我的ajax返回新内容和必需的js文件列表。

如何设置并行加载所有文件而不会出现脚本错误。像xy没有定义？

如果我并行：

// Load required js files.
var items_to_load = files_to_load.length;
$.each(files_to_load, function (index, file) {
    // Load script file if not allready loadet.
    $.getScript(file, function (script, textStatus, jqXHR) {
        items_to_load --;

        // On last file call callback function.
        if (items_to_load === 0 && typeof success_callback === 'function') {
            success_callback();
        }
    });
});

当第3个文件完成时，我永远不可能确保第一个文件已经完成了loadet。所以我有时得到xy没有定义。

如果我加载它序列。

// Load file by file.
var load_scripts = function () {
    var file = files_to_load.shift();
    // Load script file if not allready loadet.
    getScript(file, function (script, textStatus, jqXHR) {
        // On last file call callback function.
        if (files_to_load.length === 0) {
            if (typeof success_callback === 'function') {
                success_callback();
            }
        } else {
            // Load next script.
            load_scripts();
        }
    });
};
load_scripts();

需要花费更多时间。

是否可以告诉浏览器加载所有文件但是如果所有文件都是loadet则先解释它？喜欢它可以做正常的页面加载与分配

Answer 1

修改，更新

尝试（此模式）

// $(document).trigger("_ready", [ false ]) : hold 
// $(document).trigger("_ready", [ true ]) : release
$(document).trigger("_ready", [ false ]);
        var list = ["http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"
                   , "http://code.jquery.com/jquery-migrate-1.2.1.min.js"
                   , "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"
                   , "http://code.jquery.com/color/jquery.color-2.1.2.min.js"  
                   , "http://code.jquery.com/qunit/qunit-1.14.0.js" 
                   ];
        var _complete = [];
        $.each(list, function (index, value) {
            $.getScript(value)
                .done(function (data, textStatus, jqxhr) {
                _complete.push(textStatus + " at " + $.now());
                if (_complete.length === list.length) {
                    alert("list done" 
                         + "\n\n list: " + list.length 
                         + "\n\n" + list.toString() 
                         + "\n\n _complete: " 
                         + _complete.length 
                         + "\n\n" + _complete);
                    // toggle `_ready` parameter,
                    // `ready` : true
                    $(document).trigger("_ready", [ true ]);
                    // do stuff
                };
            });
        });
        $(document).on("_ready", function(e, ready) {
          // do stuff 
          // after `list` iteration, `$.getScript()` pieces complete
          // if `ready` === false,
          // block within `if` statement will _not_ run
          if (ready === true && (jQuery.QUnit 
               && jQuery.color 
               && jQuery.migrate 
               && jQuery.migrate 
               && jQuery.mobile 
               && jQuery.ui) in window)
          {
              console.log(_complete);
              alert("ready at " + $.now() +"\n"+ e.type +" ready: "+ ready);
            console.log(jQuery.ui.version
                       , jQuery.mobile.version
                       , jQuery.migrate in window
                       , jQuery.color in window
                       , jQuery.QUnit in window);
          };
        });

jsfiddle http://jsfiddle.net/guest271314/AE7zR/

加载forajax需要js文件并行

1 个答案: