jQuery 在所有 ajax .load() 请求完成后执行函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2502828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute function after all ajax .load() requests are finished
提问by Mike
I have a page that has a tab set. Each of the tabs is loaded by the jQuery .load()function.
我有一个带有标签集的页面。每个选项卡都由 jQuery.load()函数加载。
I want to display a loading animation that disappears when all of the ajax requests are finished. However, document.ready()has only provided me with limited success.
我想显示一个加载动画，当所有 ajax 请求都完成时它会消失。然而，document.ready()只为我提供了有限的成功。
How can I ensure that all ajax requests are completed before executing the code to hide the loading animation?
在执行隐藏加载动画的代码之前，如何确保所有ajax请求都完成？
回答by JC Ford
.ajaxStop(handler)
Documentation here: http://api.jquery.com/ajaxStop/
文档在这里：http: //api.jquery.com/ajaxStop/
回答by Zubair sadiq
$(document).ready(function () {
$(document).ajaxComplete(function () {
alert('Completed');
});
});
回答by Jason
Per the documentation:
根据文档：
$('.log').ajaxComplete(function() {
$(this).text('Triggered ajaxComplete handler.');
});
回答by Thomas
Use the callbackargument to .load(), setting a flag or increasing a counter in the callback function. Once all flags are set or the counter reaches the number of tabs, you know all tabs have been loaded, and you can remove the animation.
使用callback参数.load()，在回调函数中设置标志或增加计数器。一旦设置了所有标志或计数器达到选项卡数量，您就知道所有选项卡都已加载，您可以移除动画。
In pseudocode that might or might not be valid JavaScript:
在可能是也可能不是有效 JavaScript 的伪代码中：
loadedTabs = 0;
function onLoad() {
for (int i = 0; i < numTabs; ++i) {
tabs[i].load(tabUrl(i), tabLoaded);
}
}
function tabLoaded() {
++loadedTabs;
if (loadedTabs == numTabs)
loadingAnimation.display = 'none';
}
回答by Adel
Basically, I have almost similar of this issue, which I want to load a Grid after completing load 2 combo boxes and at the end I want to load a grid, so I solved like that
基本上，我有几乎类似的这个问题，我想在完成加载 2 个组合框后加载一个网格，最后我想加载一个网格，所以我就这样解决了
function LoadDropbox1()
{
//ajax1 load first dropbox
}
function LoadDropbox2()
{
//ajax2 load Second dropbox
}
function LoadGrid()
{
//ajax3 load Grid after complete the two drops loading...
}
$(document).ready(function () {
LoadDropbox1();
LoadDropbox2();
});
var Executed = false;
jQuery(function ($) {
$(document).ajaxStop(function () {
// Executed when all ajax requests are done.
if (!Executed) LoadGrid();
Executed = true;
});
});
回答by Jesfre
Look at this post and answers... https://stackoverflow.com/a/13090589/999958
看看这篇文章和答案... https://stackoverflow.com/a/13090589/999958
A useful workaround for me: Look at ajaxCallComplete() call in each .complete(...);
对我来说一个有用的解决方法：查看每个 .complete(...) 中的 ajaxCallComplete() 调用；
$(document).ready(function(){
loadPersons();
loadCountries();
loadCities();
});
// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
counter++;
if( counter >= ajaxCalls ) {
// When all ajax calls has been done
// Do something like hide waiting images, or any else function call
$('*').css('cursor', 'auto');
}
};
var loadPersons = function() {
// Show waiting image, or something else
$('*').css('cursor', 'wait');
var url = global.ctx + '/loadPersons';
$.getJSON(url, function(data) {
// Fun things
})
.complete(function() { ajaxCallComplete(); });
};
var loadCountries = function() {
// Do things
var url = global.ctx + '/loadCountries';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { ajaxCallComplete(); });
};
var loadCities = function() {
// Do things
var url = global.ctx + '/loadCities';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { ajaxCallComplete(); });
};
Hope can help...
希望能帮到...
回答by 456qwe123asd
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
$modal.show();
$overlay.show();
}
function EndRequestHandler(sender, args) {
$modal.hide();
$overlay.hide();
}
