如何使用setTimeout/.delay()等待字符间的输入

Question

我正在创建一个简单的列表框过滤器,它接受用户输入并通过javascript/jquery(列表框中大约5000多个项目)在列表框中返回匹配结果.这是代码片段:

var Listbox1 = $('#Listbox1');
var commands = document.getElementById('DatabaseCommandsHidden'); //using js for speed

$('#CommandsFilter').bind('keyup', function() {

Listbox1.children().remove();


for (var i = 0; i < commands.options.length; i++) {
    if (commands.options[i].text.toLowerCase().match($(this).val().toLowerCase())) {
        Listbox1.append($('<option></option>').val(i).html(commands.options[i].text));
    }
}
});

这非常有效,但是当输入第一个/第二个字符时,因为有太多项目,所以会有所减慢.

我认为我可以使用的解决方案是在文本框中添加延迟,以防止在用户停止键入之前调用"keyup"事件.问题是,我不知道该怎么做,或者它是否是一个好主意.

任何建议/帮助非常感谢.

Answer 1

你可以这样做一个延迟:

$('#CommandsFilter').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  var wait = setTimeout(search, 500);
  $(this).data('timer', wait);
});

function search() {
  var temp = $("<select />");
  for (var i = 0; i < commands.options.length; i++) {
    if (commands.options[i].text.toLowerCase().match($(this).val().toLowerCase())) {
      $('<option></option>', { val: i, html: commands.options[i].text }).appendTo(temp);
    }
  }
  Listbox1.empty().append(temp.children());
}

这会在您键入的元素上存储超时,如果在击键之间传递500毫秒(根据需要调整),则执行搜索.此外,这会将文档片段中的元素附加到DOM中(仍然保留编码等).根据项目的数量,这也可能是一个不错的性能提升.