Javascript jQuery keyup事件被激活多次，每次触发时都会加倍

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

它工作得很好，但是每次用户添加另一个字符或执行任何键盘事件（如backspace）时，它都会将事件激活加倍。1、2、4、8、16等。。时代

我如何使它不累积事件触发器，而只累积触发器。每个键盘事件键入一次

以下是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>

添加以下行：

$(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
      });
    }
  });
});

---

我终于想出了解决办法

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

显然，更有经验的用户请随时纠正我，如果我错了

基本上，添加一个方法解决了这个问题。因为它仅通过执行一次将事件从id1元素分离

以下是功能代码：

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

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

---

有一个丢失的}；在你的片段中。除此之外，它看起来还可以，您可以共享您的数据代码吗？您可以查看节流或去抖动功能。。。但我不知道这是否能解决你潜在的问题。谢谢你，但这并不能解决问题。它确实使一切变得更加平滑，但keyup仍被指数级多次触发！你救了我一天！非常感谢。虽然我仍然想知道为什么键控方法会引起问题。。。

$(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);
    });
  });
});