Как принудительно прервать выполнение предыдущих запросов AJAX

Question

Имеем небольшую форму, где есть поле ввода логина, отправляется ajax запрос после каждого введённого символа, если ник есть, ставится картинка галочки, если нет - крестик. Проблема в том что если быстро напечатать ник то эти картинки высветят результат на каждый символ. Выходит что я быстро пишу свой ник и потом жду пару секунд пока все галочки и крестики аккуратно появятся и уберутся, в итоге через пару секунд миганий появляется нужная мне картинка.

Необходимо, видимо, прерывать принудительно предыдущие запросы AJAX вопрос только как?

$(".nick-pay-donate").on('input',function () {

    var checkNick = $(".nick-pay-donate").val();
    $.ajax({
        url: "../handlers/checkNick.php",
        method: "POST",
        data: ({nick: checkNick}),
        dataType: 'html',
        success: function (result) {
            if (result == '1') {
                $(".nick-icon").fadeOut( 300 ).attr({'src':'/assets/icons/tick.svg','title':'Ник действительно существует в нашей системе'}).fadeIn( 300 );
            } else {
                $(".nick-icon").fadeOut( 300 ).attr({'src':'/assets/icons/close.svg','title':'Данный ник не зарегистрирован в нашей системе'}).fadeIn( 300 );
            }
        }
    });
});

Answer 1

Для таких вещей обычно используют debounce.

// создаем debounce функцию, которая будет вызываться через 500 мс после последнего вызова
var debounceOnInput = debounce(onInput, 500);

function onInput() {
  var checkNickOld = $(".nick-pay-donate").val();
  console.log('request', checkNickOld);
  // Эмулируем AJAX запрос
  setTimeout(function() {
    var checkNick = $(".nick-pay-donate").val();
    if (checkNickOld === checkNick) {
      console.log('response', checkNick);
    }
  }, 1000);
}
// при изменении значения в инпуте, вызываем debounce функцию
$(".nick-pay-donate").on('input', debounceOnInput);

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="nick-pay-donate">

БЛОГ НА HUSL

Как принудительно прервать выполнение предыдущих запросов AJAX

Ответы (1 шт):