在HTML输入框中输入数字后,如何调用运行的AJAX?

时间:2016-10-18 21:36:57

标签: javascript jquery timer delay settimeout

我有一个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" />

1 个答案:

答案 0 :(得分:3)

尝试使用if语句中的延迟

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