如何调用在 HTML 输入框中输入数字后运行的 AJAX？答案

【问题标题】：How do I call AJAX that runs after I finish typing a number in the HTML Input box?如何调用在 HTML 输入框中输入数字后运行的 AJAX？
【发布时间】：2023-04-03 03:23:02
【问题描述】：

我有一个fiddle，下面还有相同的代码。

我想实现这个 --> 用户输入一个（通常）4 位数字，完成后，我想运行 AJAX 调用。

我一直在努力解决，但到目前为止它不起作用。

var delay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();



$('order').keyup(function(e) {
  delay(function() {
    if (e.which >= 48 && e.which <= 57) {
      console.log("INSIDE");
      $.ajax({
        type: "POST",
        dataType: "json",
        url: "/echo/json/",
        data: 'order=' + $(this).val(),
        cache: false,
        success: function(json) {
          $('#ref_job').empty();
          $.each(json, function(i, value) {
            $('#ref_job').append($('<option>').text(value).attr('value', value));
          });
        }
      });
    }

  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="order" />

【问题讨论】：

你如何确定输入的结尾？字段中的数字计数？
最好在用户停止输入后（可以由“用户在最后 1000 毫秒内没有输入任何内容”的条件来确定）。作为后备，我可以检查它是否是 4 位数。
Lodash 和 Underscore 具有可能对此有所帮助的 debounce 函数。本质上，您在每次击键时调用 debounced 函数，然后您的包装函数只会在 1000 毫秒或您设置的任何时间后被调用。

标签： javascript jquery timer delay settimeout

【解决方案1】：

用 if 语句中的延迟试试这个

$('#order').keyup(function() {
  if ($(this).val().length == 4) {
    console.log('do delay with ajax here')
  }
}

【讨论】：

在这种情况下，虽然我不会延迟，对吧？当整个数字已经存在时，我为什么要延迟
是的，当它到达第四个字符时，您可以立即执行此操作，但稍有延迟不会有什么坏处……假设有人到达第四个字符并意识到它是错误的，然后退格并输入另一个字符。您的延迟可能会阻止您的函数触发两次，并且仅在它们在第四个字符处暂停时触发。不过，这将是个人喜好。
它对我有用......直到它停止......当我意识到有些数字是 5 个字符而不是 4 个字符时。我无法使用 ajax 进行延迟。这就是为什么我首先问..我现在只是使用“它是否等于 4”方法
将 keyup 函数改为 >= 4 而不是 == 4
这不是延迟，这只是在条件之后运行。