如何在键入AJAX时获得NON闪烁的加载div（我尝试过）

Question

我希望你们能帮助我不断加载div，直到输入完最后一个字母为止。现在我的输出是，键入时它将闪烁很多。我尝试给加载div淡入淡出超时，但是它实际上并没有工作（仅在第一个字母上，然后它仍然闪烁很多）。

请查看我的代码：

// Show loading overlay when ajax request starts
$( document ).ajaxStart(function() {
    if($("#keywords").val().length > 0) {
        $('.loading-overlay').fadeIn("fast");
    }
});

// Hide loading overlay when ajax request completes
$( document ).ajaxStop(function() {
    if($("#keywords").val().length > 0) {
        setTimeout(function() { $('.loading-overlay').fadeOut("fast"); }, 1000);
    }
});

我花了很长时间尝试使用各种解决方案来解决此问题，但没有任何效果。请让我知道。

Answer 1

我通过将下面的代码放在AJAX beforesend:之外来修复它。现在就可以了。它不会闪烁。如果我将以下代码放入AJAX中，则在按下几下键后会闪烁。

jQuery(function ($) {
//to store the reference to the timer
var timer;
$('#keywords').keyup(function () {
//clear the previous timer
clearTimeout(timer);
//create a new timer with a delay of 2 seconds, if the keyup is fired before the 2 secs then the timer will be cleared
timer = setTimeout(function () {
  //this will be executed if there is a gap of 2 seconds between 2 keyup events
  console.log('last')
  setTimeout(function() { $('.loading-overlay').fadeOut("fast"); }, 0);
}, 1300);
});
});