Javascript/AJAX异步加载微调器
我试图创建一个足够基本的页面,允许用户通过单击按钮来执行php脚本。单击每个按钮将有一个加载微调器弹出窗口 我的问题是,单击一个按钮,然后单击另一个按钮,两个微调器同时关闭,即使第二个微调器可能仍在处理 有人知道如何使这些微调器真正异步吗?提前谢谢你,真让我受不了 JS:Javascript/AJAX异步加载微调器,javascript,jquery,ajax,spinner,loading,Javascript,Jquery,Ajax,Spinner,Loading,我试图创建一个足够基本的页面,允许用户通过单击按钮来执行php脚本。单击每个按钮将有一个加载微调器弹出窗口 我的问题是,单击一个按钮,然后单击另一个按钮,两个微调器同时关闭,即使第二个微调器可能仍在处理 有人知道如何使这些微调器真正异步吗?提前谢谢你,真让我受不了 JS: 功能测试(元素){ var append=“#”; var测试=追加.concat(元素); document.getElementById(element.style.visibility='visible'; $.aja
功能测试(元素){
var append=“#”;
var测试=追加.concat(元素);
document.getElementById(element.style.visibility='visible';
$.ajax({url:“test.php”,success:function(result){
隐藏(元素);
}
});
};
函数隐藏(元素){
document.getElementById(element.style.visibility='hidden';
};
HTML:
我将实现一个计数器。每次显示加载指示器时,向计数器添加一个,每次要隐藏它时,减去一个。然后监控计数器,当其高于零时显示加载指示器,当为零时隐藏它。有意义吗?类似以下(未经测试)的代码可能会起到作用,它巧妙地意味着您可以在ajax请求中完全避免担心微调器:
var spinningAjax = (function() { // use of the closure created by an immediate function gives us the scope to create a persistant counter variable
var counter = 0;
$(document).ajaxComplete(function() {
counter--;
if (counter === 0) {
showSpinner(false);
}
});
return function(settings) {
counter++;
showSpinner(true);
$.ajax(settings);
}
})();
var showSpinner(bool) {
// I'll leave this up to you as it looks like your posted html / js is for example purposes rather than replicating your actual site
};
编辑:好的,在看到对另一个答案的评论后,我意识到这并不能完全解决您的问题。我会考虑一下,看看能不能做得更好
EDIT2:我认为这(不幸的是,尚未测试)代码可能是您所需要的。如果您有任何问题,请在评论中告诉我
var spinningAjax = (function() { // closure of immediate function lets us create a persistant array of the counters for each spinner
var counter = []; // an array to hold the counters for each spinner
$(document).ajaxComplete(function(event, xhr, settings) { // called whenever any ajax request is completed
if (typeof settings.ajaxGroup !== 'undefined') { // only update the counters if an ajaxGroup has been provided
counter[settings.ajaxGroup]--;
if (counter[settings.ajaxGroup] === 0) {
showSpinner(false, settings.ajaxGroup); // hide spinner when all requests connected with the spinner have been completed
}
}
});
return function(settings) { // this is the function actually assigned to the variable spinningAjax as a result of the immediate function
counter[settings.ajaxGroup] = counter[settings.ajaxGroup] ? counter[settings.ajaxGroup]+1 : 1; // can't just use the ++ operator as this property might not be defined yet
showSpinner(true, settings.ajaxGroup);
$.ajax(settings);
}
})();
var showSpinner(bool, spinnerIdentifier) {
// I'll leave this up to you as it looks like your posted html / js is for example purposes rather than replicating your actual site
};
谢谢,我明白你的意思了,我会向你汇报的,同时欢迎任何人提出建议。只是检查一下,你知道我的意思是会有5个加料纺纱机吗?不只是一个你想要五个加载指示器还是一个?不止一个,发布的代码将创建五个,应用程序将需要多个指示器。非常感谢您的想法。如果您想要五个单独的加载指示器,我看不到您的代码中有任何明显的错误。您可能希望在PHP呈现HTML页面后检查该页面,并确保没有任何PHP错误,例如不匹配的引号。非常感谢您花了这么多时间
var spinningAjax = (function() { // use of the closure created by an immediate function gives us the scope to create a persistant counter variable
var counter = 0;
$(document).ajaxComplete(function() {
counter--;
if (counter === 0) {
showSpinner(false);
}
});
return function(settings) {
counter++;
showSpinner(true);
$.ajax(settings);
}
})();
var showSpinner(bool) {
// I'll leave this up to you as it looks like your posted html / js is for example purposes rather than replicating your actual site
};
var spinningAjax = (function() { // closure of immediate function lets us create a persistant array of the counters for each spinner
var counter = []; // an array to hold the counters for each spinner
$(document).ajaxComplete(function(event, xhr, settings) { // called whenever any ajax request is completed
if (typeof settings.ajaxGroup !== 'undefined') { // only update the counters if an ajaxGroup has been provided
counter[settings.ajaxGroup]--;
if (counter[settings.ajaxGroup] === 0) {
showSpinner(false, settings.ajaxGroup); // hide spinner when all requests connected with the spinner have been completed
}
}
});
return function(settings) { // this is the function actually assigned to the variable spinningAjax as a result of the immediate function
counter[settings.ajaxGroup] = counter[settings.ajaxGroup] ? counter[settings.ajaxGroup]+1 : 1; // can't just use the ++ operator as this property might not be defined yet
showSpinner(true, settings.ajaxGroup);
$.ajax(settings);
}
})();
var showSpinner(bool, spinnerIdentifier) {
// I'll leave this up to you as it looks like your posted html / js is for example purposes rather than replicating your actual site
};