Question

我使用jQuery使用load()将文件从文件加载到div中。

只有在加载文本时才需要调用JavaScript函数。我知道一旦加载了一个文本文件，我就可以使用load()回调来执行此操作，但是只有在所有文件都加载后我才能这样做？

这是我尝试使用$.when()：

$.when($("#testdiv").load("text/textures.txt")).done(functio‌n () { var msg = document.getElementById('testdiv').innerHTML; alert(msg); });

下面有评论指出为什么它是错误的。我需要深入挖掘才能理解它。

Answer 1

var loaded = 0;

function callback() {
    loaded++;
    if (loaded === totalNeeded) {
        alldone();
    }
}

function alldone() {
    //do stuff here;
}

Answer 2

您可以扩展jQuery以添加所需的功能。下面是一个添加名为loadPromise的jQuery方法的示例，该方法接受类似.load的字符串url，或者为每个匹配元素调用的回调，它返回传递给{{1}的参数对于那个元素。它返回一个promise，它解析为一个数组，每个元素加载一个.load结果。

.load

这是一个live demo on jsfiddle。请注意，由于jsfiddle已经竭尽全力阻止这类事情，它会出现404错误（当然，我传递的示例名称不是有效的URL），但是如果你检查控制台，你会看到它正在工作如预期。在您自己的网站上，如果您现有的// You can pass a single url to be used on all matching elements // or you can pass a callback, which is called for each // element in the selector, which returns the url to use // for that element $.fn.loadPromise = function(urlOrCallback) { var promises = []; this.each(function(i, element) { var url, defer; if (typeof urlOrCallback === 'function') url = urlOrCallback.call(element, i, element, this); else url = urlOrCallback; if (url) { defer = $.Deferred(); $(element).load(url, function(responseText, textStatus, xhr) { defer.resolve({ element: element, responseText: responseText, textStatus: textStatus, xhr: xhr }); }); promises.push(defer.promise()); } }); return $.when.apply($, promises).then(function(/*...*/) { return Array.prototype.slice.call(arguments); }); }; // Simple example: $('.single-example') .loadPromise('example-single') .then(function(result) { console.log('done load: ' + result[0]); }); // Example with multiple $('.multi-example').loadPromise(function() { return $(this).attr('data-url'); }).then(function(multi) { console.log('multi done', multi); });有效，则无需加载。

工作原理：

JQuery扩展函数获取.load中传递的选择器。它使用this遍历每个匹配元素，使用传递的url或调用回调的结果为该元素调用each，并创建为每个元素解析的promise并将其添加到.load数组。

一旦它有了一系列的promises，它就会花费它并使用promises将多个参数传递给apply，每个元素一个。 $.when返回一个在所有promise都被解析后解析的promise。 promise $.when返回的.then接收多个参数，每个承诺一个。 $.when处理程序获取所有参数并从中创建一个数组，然后返回它，解析从.then返回的带有单个参数，完成数组的承诺。

运行小提琴并查看调试器控制台。您将看到使用数组解析了承诺loadPromise返回，单击它们并查看它返回的内容。您可能不需要那么详细的信息，只需要解决的承诺告诉您它们都已完成加载。

旁注

大多数可以处理多个元素的jQuery API都有一个重载，您可以在其中传递一个函数，并为每个元素的参数赋予一个值，就像我在扩展中所做的那样。例如，loadPromise可以在匹配多个元素的选择器上工作，通过调用回调来获取每个元素的文本。显然，他们忘了为.text做这件事。此外，jQuery还有一种等待多个完成的机制，用于等待多个动画。他们似乎也忘记了.load。

将多个文件中的文本加载到多个div中，然后仅在加载所有文本时调用函数

2 个答案:

工作原理：

旁注