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事件被多次激活，每次触发时都会加倍

2 个答案: