主页 / 问题 / 1081705
Accepted
DmitryDevelop
Asked:2020-02-12 21:16:40 +0000 UTC2020-02-12 21:16:40 +0000 UTC

如何强制中止以前的 AJAX 请求

  • 772

我们有一个小表单，里面有一个登录输入框，每输入一个字符后发送一个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 );
            }
        }
    });
});

在此处输入图像描述 在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    对于这样的事情，他们通常使用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">

    • 2

相关问题