使用 jQuery 延迟显示 ajax 加载 gif答案

【问题标题】：delay the showing of a ajax loading gif using jQuery使用 jQuery 延迟显示 ajax 加载 gif
【发布时间】：2009-12-05 08:18:34
【问题描述】：

延迟显示 ajax-loader gif 的最佳方法是什么？当我单击一个按钮时，即使花费的时间是几百毫秒，加载程序 gif 也会显示和隐藏，这会给浏览器带来一种闪烁。我想说的是，仅在完成 ajax 请求的时间超过 1000 毫秒时才显示 gif。

 <script type="text/javascript">
     $(document).ready(function() {
         $('#loader').hide();
         $('#btnGetPeople').click(function() {
            $('#loader').show();
             $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
         });
     });

     function showPerson(data) {
         alert(data);
         $('#loader').hide();
     }
</script>

我的加载器 div 包含....

<div id="loader"><img alt="" src="/content/ajax-loader.gif" /></div>

实现这一目标的最佳技术是什么？

【问题讨论】：

标签： jquery

【解决方案1】：

如您所见，我添加了一个延迟显示 300 毫秒的超时。如果 ajax 更快，则在加载程序真正显示之前取消超时。

<script type="text/javascript">
    var showLoader;
    $(document).ready(function() {
        $('#loader').hide();
        $('#btnGetPeople').click(function() {
            // only show loader if ajax request lasts longer then 300 ms
            showLoader = setTimeout("$('#loader').show()", 300);
            $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
        });
    });

    function showPerson(data) {
        clearTimeout(showLoader);
        alert(data);
        $('#loader').hide();
    }
</script>

【讨论】：

大声笑......这就是我不落俗套的结果。好答案@jitter

【解决方案2】：

这是一种有趣的方法。将 $loader.show() 替换为：

$("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));

还有你的隐藏命令：

window.clearTimeout($("#loader").hide().data('timeout'));

【讨论】：

@dcneiner, quick q - 什么是“超时”？
只是一个自定义的data 属性来保持从setTimeout 返回的int 与我们的DOM 对象相关联。要么是 this，要么声明另一个变量，如 @jitter。我只是想展示一种使用 jQuery 的包含方式。
@RageZ clearTimeout 仅在传递从setTimeout 函数返回的相同integer 时才有效。由于我将integer 存储在自定义data 属性中，因此可以正常工作。
噢！忘记超时长度...更新我的答案:)
谢谢 :) 至少您会想到将来可能会使用data 功能。祝你的项目好运！

【解决方案3】：

你也可以这样做。

var loadingTimer;

$(document).ready(function () {

    $("#loader").ajaxStart(function () {
        loadingTimer = setTimeout(function () {
            $("#loader").show();
        }, 200);
    });

    $("#loader").ajaxStop(function () {
        clearTimeout(loadingTimer);
        $(this).hide();
    });

}

【讨论】：

【解决方案4】：

我想我会分享我为此做的事情。我有一种情况，我需要做的不仅仅是显示或隐藏一个元素。所以我使用 bind 为加载器创建自定义事件：

$("#loader").bind("delayshow", function (event, timeout) {
    var $self = $(this);
    $self.data('timeout', setTimeout(function () {
        // show the loader
        $self.show();
        /* 
            implement additional code here as needed
        */
    }, timeout));
}).bind("delayhide", function (event) {
    // close and clear timeout
    var $self = $(this);
    clearTimeout($self.hide().data('timeout')); 
    /*
        implement additional code here as needed 
    */
});

// show it with a 500 millisecond delay
$("#loader").trigger('delayshow', 500);

// hide it
$("#loader").trigger('delayhide');

【讨论】：