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

Posted 2023-02-24

【中文标题】为特定请求禁用 ajaxStart() 和 ajaxStop()

【英文标题】：Disable ajaxStart() and ajaxStop() for a specific request

【发布时间】：2012-09-18 06:08:10

【问题描述】：

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

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

我现在的问题在于仅针对长轮询请求禁用此模式..

注册“加载屏幕”开启和关闭处理程序：

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

我的长轮询函数：

$.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() 中引入一个全局变量，该变量将在函数的第一行返回，但这似乎完全终止了加载屏幕。

有什么想法可以实现吗？

【参考方案1】：

我想通了..

选项对象.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
);

【讨论】：

很高兴他们想到了这个确切的场景，我们需要绕过那些包罗万象的 ajax 函数。将 global 设置为 false 将禁止所有全局触发器：ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess()，而不仅仅是 Start 和 Stop。

好发现！并且在 jQuery 方面有很好的想法来先发制人。

【参考方案2】：

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

解决方案 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：将属性 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);
                
       );

此解决方案可禁用 ajaxStart()/ajaxStop() 事件。但是，它也会禁用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 文件中使用全局变量。不过，这是我能找到的最简单的解决方案。

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