jQuery 针对特定请求禁用 ajaxStart() 和 ajaxStop()
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12604722/
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
Disable ajaxStart() and ajaxStop() for a specific request
提问by Gung Foo
I am using .ajaxStart() and .ajaxStop() to show a modal while an ajax request is being made. (between start and stop)
我正在使用 .ajaxStart() 和 .ajaxStop() 在发出 ajax 请求时显示模态。(开始和停止之间)
Now I'd like to add a longpoll function that keeps waiting for notifications, similar to the one on the left upper corner of this site.
现在我想添加一个持续等待通知的longpoll函数,类似于本站左上角的那个。
My problem now lies in disabling this modal only for the longpolling request..
我现在的问题在于仅针对长轮询请求禁用此模式。
Registering "loading screen" on and off handlers:
注册“加载屏幕”打开和关闭处理程序:
$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);
My longpoll function:
我的长轮询功能:
$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $('#numQueCount').html(data.queCount);
if(data.queAccept) $('#numQueAccept').html(data.queAccept);
},
dataType: 'json',
complete: longpoll
});
I tried:
我试过:
$().off('ajaxStart');
$().off('ajaxStop');
..and reattaching the handlers after starting the polling, but no joy.
..并在开始轮询后重新连接处理程序,但没有乐趣。
I also tried introducing a global variable into handleAjaxStart()
that would return at the first line of the function, but that seems to completely kill the loading screen.
我还尝试引入一个全局变量handleAjaxStart()
,它会在函数的第一行返回,但这似乎完全杀死了加载屏幕。
Any ideas how this can be achieved?
任何想法如何实现?
回答by Gung Foo
I figured it out..
我想到了..
There is an attribute in the options object .ajax()
takes called global
.
options 对象中有一个属性.ajax()
叫做global
.
If set to false, it will not trigger the ajaxStart
event for the call.
如果设置为false,则不会触发ajaxStart
调用事件。
$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $('#numQueCount').html(data.queCount);
if(data.queAccept) $('#numQueAccept').html(data.queAccept);
},
global: false, // this makes sure ajaxStart is not triggered
dataType: 'json',
complete: longpoll
});
回答by ahmet
After reading all possible solutions, I want to combine answers.
阅读所有可能的解决方案后,我想合并答案。
Solution 1: Bind/Unbind
解决方案 1:绑定/解除绑定
//binding
$(document).bind("ajaxStart.mine", function() {
$('#ajaxProgress').show();
});
$(document).bind("ajaxStop.mine", function() {
$('#ajaxProgress').hide();
});
//Unbinding
$(document).unbind(".mine");
It is a depreciated solution. Before jQuery 1.9, global events of ajax like ajaxStart, ajaxStop, ajaxError etc. can be binded to any element. After jQuery 1.9:
这是一个折旧的解决方案。在 jQuery 1.9 之前,ajax 的全局事件如 ajaxStart、ajaxStop、ajaxError 等可以绑定到任何元素。jQuery 1.9 之后:
As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document.
从 jQuery 1.9 开始,jQuery 全局 Ajax 事件的所有处理程序,包括使用 .ajaxStart() 方法添加的处理程序,都必须附加到文档。
Therefore we cannot bind/unbind these events to custom namespaces.
因此,我们无法将这些事件绑定/解除绑定到自定义命名空间。
Solution 2: Set the property global
to false
解决方案 2:将属性设置global
为false
$.ajax({
url: "google.com",
type: "GET",
dataType: "json",
global: false, //This is the key property.
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
This solution works to disable ajaxStart()/ajaxStop()
event(s). However, it also makes disable ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess()
. If you don't use these global events, it seems ok, but when it is needed, you have to come back and change your solution for all pages where you set global: false
.
此解决方案可用于禁用ajaxStart()/ajaxStop()
事件。但是,它也会使 disable ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess()
。如果您不使用这些全局事件,似乎还可以,但是当需要时,您必须返回并为您设置的所有页面更改您的解决方案global: false
。
Solution 3: Use global variable
解决方案 3:使用全局变量
var showLoadingEnabled = true;
$(document).ready(function () {
$('#loading')
.hide() // at first, just hide it
.ajaxStart(function () {
if (showLoadingEnabled) {
$(this).show();
}
})
.ajaxStop(function () {
if (showLoadingEnabled) {
$(this).hide();
}
});
});
function justAnotherFunction() {
window.showLoadingEnabled = false;
$.ajax({
url: 'www.google.com',
type: 'GET',
complete: function (data) {
window.showLoadingEnabled = true;
console.log(data);
}
});
}
Global variables should not be used in javascript files. However, this is the simplest solution, I can find.
不应在 javascript 文件中使用全局变量。但是,这是我能找到的最简单的解决方案。
I prefered the third solution for my project.
我更喜欢我的项目的第三个解决方案。