我如何知道何时使用getScript完成Ajax调用?
我正在使用jQuery getScript
将X量的js文件加载到我的页面中。 每个JS页面都有一个AJAX调用,用于从数据库中获取数据。
我在getScript
上使用.done
方法来查看加载所有文件的时间,但我需要等到所有的AJAX调用都完成。
在getScript
之前,我怎样才能通过getScript
等待AJAX调用完成包含的文件?
$.getMultiScripts(moduleIncludes, 'includes/js/modules/').done(function() { // All of the JS files have been included but we need to wait until those files have finished their AJAX call. }); // Get array of JS scripts to load $.getMultiScripts = function(arr, path) { var _arr = $.map(arr, function(scr) { return $.getScript((path || "") + scr); }); _arr.push($.Deferred(function(deferred) { $(deferred.resolve); })); return $.when.apply($, _arr); }
你可以使用.ajaxStop()
每当Ajax请求完成时,jQuery都会检查是否还有其他未完成的Ajax请求。 如果没有,jQuery会触发
ajaxStop
事件。
$(document).on("ajaxStop", function() { // do stuff when all `$.ajax()` call have complete $(document).off("ajaxStop") }); $.getMultiScripts(moduleIncludes, 'includes/js/modules/').done(function() { // All of the JS files have been included but we need to wait until those files have finished their AJAX call. });
另一种方法是使用$.when.apply()
两次。 也就是说,将ajax调用推入第二个数组
"module1.js"
data.push($.get("/path/to/module1-resource"))
var modules = ["module1.js", "module2.js", "module3.js"]; // declare global `data` array data = []; $.getMultiScripts = function(arr, path) { var _arr = $.map(arr, function(scr) { return $.getScript(scr) }); return $.when.apply($, _arr.concat($.when())) } $.getMultiScripts(arr) .then(function() { console.log("getScript calls", arguments) $.when.apply($, data).then(function() { console.log("ajax calls", arguments) }) });