对特定请求禁用ajaxStart()和ajaxStop()


77

我正在使用.ajaxStart()和.ajaxStop()在提出ajax请求时显示模式。(在开始和停止之间)

现在,我想添加一个longpoll函数,该函数一直等待通知,类似于本网站左上角的通知。

我的问题现在在于仅针对longpolling请求禁用此模式。

在处理程序上注册“加载屏幕”:

$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);

我的longpoll函数:

$.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
});

我试过了:

$().off('ajaxStart');
$().off('ajaxStop');

..并在开始轮询后重新连接处理程序,但没有任何乐趣。

我还尝试向其中引入一个全局变量handleAjaxStart(),该变量将在函数的第一行返回,但这似乎完全破坏了加载屏幕。

有什么想法可以实现吗?

Answers:


189

我想到了..

options对象中.ajax()有一个名为的属性global

如果设置为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
});

4
非常高兴他们想到了这种确切的情况,我们将需要绕过所有的ajax函数。将global设置为false将抑制所有全局触发器:ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess(),而不仅仅是Start和Stop。
XstiX

14

阅读所有可能的解决方案后,我想结合答案。

解决方案1:绑定/取消绑定

//binding
$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

//Unbinding
$(document).unbind(".mine");

这是一个折旧的解决方案。在jQuery 1.9之前,可以将ajax的全局事件(如ajaxStart,ajaxStop,ajaxError等)绑定到任何元素。在jQuery 1.9之后:

从jQuery 1.9开始,所有用于jQuery全局Ajax事件的处理程序,包括那些添加有.ajaxStart()方法的处理程序,都必须附加到文档中。

因此,我们无法将这些事件绑定/解除绑定到自定义名称空间。

解决方案2:将属性设置globalfalse

$.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);
                }
       });

该解决方案可禁用ajaxStart()/ajaxStop()事件。但是,这也会使disable成为可能ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess()。如果您不使用这些全局事件,那似乎没问题,但是当需要它时,您必须返回并更改设置的所有页面的解决方案global: false

解决方案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);
        }
    });
}

全局变量不应在javascript文件中使用。但是,我可以找到这是最简单的解决方案。

我更喜欢我的项目的第三个解决方案。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.