延迟后发送 ajax post

Question

我有一个输入字段，用户可以在其中输入搜索字符串。此字符串应在按下事件时作为 ajax post 发送：

$( "#inputField" ).keypress(function() {  
  // AJAX
});

使用此功能，ajax post 将发送每个按键。例如：用户写了“Example”=> 7 个字母 => 7 次 ajax post

我怎样才能让它变得更好？

Answer 1

你可以使用这个小功能，它的工作方式是在用户完成输入并延迟后运行

示例代码：

function debounce(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}
// Sample:
$('#input').keyup(debounce(function (e) {
  console.log('Time Ended!', this.value);
}, 800));

试一试：

function debounce(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}
// Sample:
$('#input').keyup(debounce(function (e) {
  console.log('Time Ended!', this.value);
}, 800));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<label for="input">Search:
<input id="input" type="text" placeholder="words..."/>
</label>

延迟后发送 ajax post

send ajax post after delay

ajax

jquery

events

keypress