setTimeout 无法与 ajaxStart 一起正常工作答案

【问题标题】：setTimeout not working properly with ajaxStartsetTimeout 无法与 ajaxStart 一起正常工作
【发布时间】：2016-12-30 10:39:12
【问题描述】：

我想在执行 ajax 请求期间延迟加载 gif 的出现，以便在请求持续时间不超过一秒时它不会显示。即使 gif 显示时没有增加很大的延迟，但当我在 setTimout 函数中将值设置为大于 80 时，它就不会显示。我错过了什么？

function ajaxLoading()
{
    $(document).ajaxStart(function () 
    {
        ajaxLoadingTimeout = setTimeout(function () {
            $('#loading').show();
        }, 1000)

    });

    $(document).ajaxStop(function () {
        clearTimeout(ajaxLoadingTimeout);
        $('#loading').hide();
    });
}

【问题讨论】：

标签： javascript jquery ajax settimeout

【解决方案1】：

你可以试试这个：

function ajaxLoading()
{    
    var flag=true;
    $(document).ajaxStart(function () 
    {
        flag=true;
        ajaxLoadingTimeout = setTimeout(function () {
            if(flag){
               $('#loading').show();
            }
        }, 1000)

    });

    $(document).ajaxStop(function () {
        flag=false;
        clearTimeout(ajaxLoadingTimeout);
        $('#loading').hide();
    });
}

【讨论】：

我已经检查了这个以及人们在其他帖子中建议的许多其他方式，但不幸的是同样的事情发生了。它仅适用于最大值 80。必须有其他东西阻止它执行。
这个逻辑需要工作，因为如果 ajax 调用在 1 秒前停止，那么该标志设置为 false。
我知道，我仔细检查了一遍以确保。它仍然适用于 83 的值。
可能问题是连续有3个ajax请求。第一个被触发，但在设置的延迟期间下一个开始，这次没有触发 ajaxStart，因为最后一个还没有完成。

【解决方案2】：

根据评论更新答案

function ajaxLoading()
{
    $('document')
    .ajaxStart(function(){
        $("#loading").delay(1000).show();
    })
    .ajaxStop(function(){
        $("#loading").hide();
        $(this).unbind("ajaxStart");
    });
}

【讨论】：

我希望加载 gif 文件延迟 1 秒，以便在 ajax 请求持续时间少于 1 秒时不会显示。我只希望在请求持续超过 1 秒时显示 gif。
你可以设置延迟1秒然后加载div $("#loading").delay(1000).show();答案已更新
根据 jQuery 文档，只有队列中的后续事件被延迟；例如，这不会延迟不使用效果队列的 .show() 或 .hide() 的无参数形式。我正在尝试使用 .fadeIn(400) 而不是 show() 函数，但不知何故，它仅在请求完成后才会触发。