jquery - 使用 jQuery 延迟显示 ajax 加载 gif

Question

延迟 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>

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

Answer 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>