Question

我在我的搜索文本框的密钥上发送了AJAX查询，但我想要做的是等到用户停止输入后的1秒钟。

我的代码：

searchBar = $('#searchBar');
searchBar.timerID = null;
searchBar.textBox = $('#searchBar > input[name="q"]');
searchBar.textBox.sendQuery = function(){
  alert('SEND AJAX HERE');
  searchBar.timerID = null;
};
searchBar.textBox.keyup(function() {
  if(searchBar.timerID){ clearTimeout(searchBar.timerID); }
  searchBar.timerID = setTimeout(searchBar.textBox.sendQuery, 1000);
});

它似乎有效，但是最好的解决方法呢？

Answer 1

污染像$('#searchBar').value = 'blah'这样返回的jQuery对象不是一种好习惯 - 相反，你应该使用.data方法：

你根本不需要searchBar，只需将计时器放在相应的输入元素上。我总是在$前面加上jQuery对象的前缀，以便更好地澄清。

$input = $('#searchBar input[name="q"]');

var sendQuery = function() {
  alert('SEND AJAX HERE');
};

$input.keyup(function() {
  var timer = $(this).data('timerID');
  if (timer) {
      clearTimeout(timer);
  }
  $(this).data('timerID', setTimeout(sendQuery, 1000));
});

Answer 2

此plugin会在短暂延迟后触发事件。然后，您可以使用以下内容：

$(searchBar).bindWithDelay("keyup", callback, 1000);

Answer 3

了解Ben Alman的辩护插件http://benalman.com/projects/jquery-throttle-debounce-plugin/

减少自动完成的AJAX调用量？

3 个答案: