JQuery AjaxStart / Stop实现延迟功能？

Question

在我的单页应用程序上工作时，我正在考虑实现微调器和灰色背景。这样可以防止用户在加载进程时多次点击按钮，并向他们发出进程正在加载的信号。但是我浏览了网页，有JQuery AjaxStart()和AjaxStop()函数。所以我用它在我的应用程序中显示每个ajax调用的微调器。这是我的代码示例。 HTML：

<div class="overlay">
    <div id="loading-img"></div>
</div>

JQuery的：

$(document).ajaxStart(function () {
    $('.overlay').delay(3500).show();
}).ajaxStop(function () {
    $('.overlay').hide();
});

CSS：

 #loading-img {
        background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    .overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }

上面的代码工作，微调器显示灰色背景。唯一的问题是旋转器将显示半秒钟，我想防止这种情况并延迟。所以我已经实现了delay()方法来完成这个技巧，但什么都没发生。我的旋转器应该只在3秒后显示。我不确定我的代码中是否有问题。此外，如果这是实现微调和灰色背景的最佳方法。如果有人有任何建议，请告诉我。

Answer 1

您可以尝试这样做。启动计时器，如果在超时发生之前加载完成，可以取消计时器

var timer;

$(document).ajaxStart(function () {
    timer = setTimeout(function() { $('.overlay').show(); }, 3500);

}).ajaxStop(function () {
    clearTimeout(timer);
    $('.overlay').hide();
});

在您的代码中，请求可能会在延迟用完之前完成。您尝试隐藏未显示的进度，然后显示超时完成时的进度。

Answer 2

.delay()方法适用于可以排队的效果。

  

只有队列中的后续事件才会延迟;例如，这不会延迟不使用效果队列的.show（）或.hide（）的无参数形式。    - jQuery .delay()

给.show/hide()一段时间

演示

＆＃13;

＆＃13;

$('.btn1').on('click', function() {
  $('#overlay1').delay(3500).fadeIn(750).delay(2000).fadeOut(750);
}); // this looks better

$('.btn2').on('click', function() {
  $('#overlay2').delay(3500).show(750).delay(2000).hide(750);
});

＆＃13;

body {
  position: relative;
}

.overlay {
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, .3);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
}

.overlay::after {
  content: url(https://loading.io/spinners/flat-ball/lg.flat-bouncing-circle-loading-icon.gif);
}

＆＃13;

<button class='btn1'>FadeIn/Out</button>
<button class='btn2'>Show/Hide</button>
<div id='overlay1' class='overlay'>FadeIn/Out</div>

<div id='overlay2' class='overlay'>Show/Hide</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;