jQuery-仅当ajax调用花费超过1秒时才显示加载图像？

只有在ajax调用花费的时间超过（比如）1秒时，才能显示“Loading…”动画吗？我的一些ajax调用速度非常快，但在加载图标消失之前，我仍然会看到它。也许只是我，但我觉得这会分散我的注意力。不过，我不想把它全部删除。有什么建议吗？这是我的密码-

    $('#loading').hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

<div id="loading">
    <img alt="Loading, please wait.." src="/content/images/spinner.gif" />
</div>

$（'#加载'）.hide（）
.ajaxStart（函数（）{
$（this.show（）；
})
.ajaxStop（函数（）{
$（this.hide（）；
});

您应该将代码放入计时器中：

var $loader = $('#loading'), timer;

$loader.hide()
    .ajaxStart(function()
    {
        timer && clearTimeout(timer);
        timer = setTimeout(function()
        {
            $loader.show();
        },
        1000);
    })
    .ajaxStop(function()
    {
        clearTimeout(timer);
        $loader.hide();
    });

---

您可以使用

setTimeout（）

---

1） 必须将

元素

捕获为参数。2） 不要传递

元素

，因为它未定义-传递

此

。3） 这在IE中不起作用，因为它不允许您以这种方式传递参数。@JosephSilber我今天编码不好。。。will fix.@Joseph我也有同样的问题，谢谢你发布这个解决方案。我想澄清一下语法-var$loader=$（“#加载”），timer；正在创建包含计时器和选择器id=loading的jquery对象。计时器&清除超时（计时器）；为什么这样写而不是简单的clearTimeout（计时器）？我也试过类似的方法，但只是成功地推迟了节目，而不是只在x毫秒后才播放。仍然不太清楚封装全球事件是如何实现其目标的。可以展开吗？@codepiphy-

clearTimeout

需要一个计时器ID作为其参数。

ajaxStart

第一次运行时，

timer

将被取消定义。虽然将未定义的传递给

clearTimeout

似乎不会引起任何错误，但我还没有对其进行足够的测试，因此我决定首先检查

timer

是否确实有id相当于

if（timer）{clearTimeout（timer）；}

@JosephSilber好的，我现在看到了。那很整洁。谢谢

var loadingTimeout;
$('#loading').hide()
.ajaxStart(function() {
    var element = $(this);
    loadingTimeout = setTimeout(function() {
       element.show();
    }, 1e3);
})
.ajaxStop(function() {
    clearTimeout(loadingTimeout);
    $(this).hide();
});