jQuery keyup事件被激活多次，每次触发翻倍

Question

我在我的网站上添加了一个自动完成的搜索栏。每次用户键入新字符时，它都会在数据库中查询以输入的字符串开头的元素。

它工作正常，但是每次用户添加另一个字符或执行任何键盘事件（如退格键）时，它都会使事件激活加倍。 1、2、4、8、16 等..次。

我怎样才能让它不累积事件触发器并且每次键盘事件只触发 .keyup() 一次？

这是 HTML 代码：

<form>
<div class="nav-item">
    <input class="search-query form-control" placeholder="Items" 
       type="text"  name="items" value="" id="id1" />
</div>
</form>
<hr>
<div id="id2">
</div>

这里是 jQuery 代码：

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

Answer 1

添加这些行：

$(document).ready(function() {
var lastTime = Date.now(), milisecondsToWait = 2000;//Here we will wait 2 seconds
  $('#id1').keyup(function(){
    if(Date.now() - lastTime >= milisecondsToWait){//And here
      var query = $(this).val();
      $.get('/url/', {items: query}, function(data){
        $('#id2').html(data);
        lastTime = Date.now(); //And finally here
      });
    }
  });
});

Answer 2

我终于想出了解决办法。

对于任何感兴趣的人，我是这样做的：

（显然是更有经验的用户，如有错误请随时指正！）

基本上，加一个.one()方法就解决了。因为它通过仅执行一次来从 "#id1" 元素分离事件。

这是功能代码：

$(document).ready(function() {
  $('#id1').one("keyup", function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

为了比较，这里是上面再次发布的旧：

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

jQuery keyup事件被激活多次，每次触发翻倍

jQuery keyup event is activated multiple times, doubling every time it's triggered

javascript

jquery

html

django

keyup