javascript - 如何使用 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 中(仍然保留编码等)。根据项目的数量，这也可能是一个不错的性能提升。