如何使用setTimeout / .delay() 在字符之间等待打字
如何使用setTimeout / .delay() 在字符之间等待打字
我正在创建一个简单的列表框过滤器,通过JavaScript/jQuery将用户输入与列表框中的匹配结果返回(列表框中大约有5000个以上的项目)。以下是代码片段:
var Listbox1 = $('#Listbox1'); var commands = document.getElementById('DatabaseCommandsHidden'); //使用js提高速度 $('#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($('').val(i).html(commands.options[i].text)); } } });
这个方法效果还不错,但是当输入的是第一个或第二个字符时,速度会变慢,因为列表中有很多项。
我想到的一个解决方法是为文本框添加延迟,防止在用户停止输入之前触发"keyup"事件。问题是,我不确定如何做到这一点,或者这是否是一个好主意。
非常感谢任何建议和帮助。
问题的出现的原因是需要在用户输入字符之间等待一段时间后再执行操作。解决方法是使用setTimeout或.delay()来延迟执行操作。
下面是改进后的代码:
var commands = document.getElementById("DatabaseCommandsHidden"); var filteredDropDown = document.getElementById("Listbox1"); var filterInput = document.getElementById("CommandsFilter"); var timer; // 创建一个缓存的命令下拉列表的小写文本列表 var commandTexts = [], commandText; for (var i = 0, len = commands.options.length; i < len; ++i) { commandText = commands.options[i].text; commandTexts.push({original: commandText, lower: commandText.toLowerCase()}); } function populateFilteredDropDown() { timer = null; var val = filterInput.value.toLowerCase(), commandText; var opts = filteredDropDown.options; filteredDropDown.length = 0; for (var i = 0, len = commandTexts.length; i < len; ++i) { commandText = commandTexts[i]; if (commandText.lower.indexOf(val) > -1) { opts[opts.length] = new Option(commandText.original); } } } filterInput.onkeyup = function() { if (timer) { window.clearTimeout(timer); } timer = window.setTimeout(populateFilteredDropDown, 500); };
这个解决方法使用了setTimeout函数来延迟执行populateFilteredDropDown函数,从而在用户输入字符之间等待一段时间后再更新过滤后的下拉列表。同时,还使用了一个缓存的命令下拉列表的小写文本列表,以提高性能。这个解决方法在大多数浏览器中比使用jQuery的方法快10到30倍。
setTimeout / .delay()函数的作用是在字符之间等待一段时间。在上述代码中,通过使用setTimeout函数和keyup事件,可以实现在用户输入字符后等待一段时间执行搜索的功能。当用户在输入框中键入字符时,会清除之前设置的计时器,并重新设置一个新的计时器,等待500毫秒后执行搜索。搜索函数会遍历一个包含选项的下拉菜单,根据用户输入的字符和选项的文本进行匹配,将匹配的选项添加到一个临时的文档片段中。最后,将文档片段中的选项添加到一个列表框中。
这种方法的优势在于,通过在键入字符之间设置延迟,可以减少搜索的频率,提高性能。此外,将选项添加到文档片段中,再统一添加到DOM中,可以避免频繁的DOM操作,也有助于提高性能。
在代码中还提到了一些性能优化的建议,比如将$(this).val().toLowerCase()提前定义为一个变量,避免在循环中多次调用。另外,还提到了关于使用字符串拼接和使用jQuery创建DOM元素的性能比较的讨论。
最后,还指出了代码中的一个错误,即将var temp = $("");中的vat拼写错误应该是var。
通过以上内容的整理,可以得出问题的出现原因是需要实现在字符之间等待一段时间的功能,解决方法是使用setTimeout函数和keyup事件。整理成一篇文章如下:
在编写网页时,有时需要实现在用户输入字符后等待一段时间再进行搜索的功能。这个需求可以通过使用setTimeout函数和keyup事件来实现。
具体的实现代码如下:
$('#CommandsFilter').keyup(function() { clearTimeout($.data(this, 'timer')); var wait = setTimeout(search, 500); $(this).data('timer', wait); }); function search() { var temp = $(""); for (var i = 0; i < commands.options.length; i++) { if (commands.options[i].text.toLowerCase().match($(this).val().toLowerCase())) { $('', { val: i, html: commands.options[i].text }).appendTo(temp); } } Listbox1.empty().append(temp.children()); }
上述代码中,通过在keyup事件中设置setTimeout函数,实现了在用户输入字符后等待500毫秒后执行搜索的功能。在每次键入字符时,会先清除之前设置的计时器,并重新设置一个新的计时器。当等待时间结束后,会调用搜索函数。
搜索函数中,会遍历一个包含选项的下拉菜单,根据用户输入的字符和选项的文本进行匹配。如果匹配成功,就将该选项添加到一个临时的文档片段中。最后,将文档片段中的选项添加到一个列表框中,完成搜索的过程。
这种方法的优势在于,通过在键入字符之间设置延迟,可以减少搜索的频率,提高性能。此外,将选项添加到文档片段中,再统一添加到DOM中,可以避免频繁的DOM操作,也有助于提高性能。
在代码中还提到了一些性能优化的建议,比如将$(this).val().toLowerCase()提前定义为一个变量,避免在循环中多次调用。另外,还提到了关于使用字符串拼接和使用jQuery创建DOM元素的性能比较的讨论。
最后,还指出了代码中的一个错误,即将var temp = $("");中的vat拼写错误应该是var。
通过以上内容的整理,我们可以了解到如何使用setTimeout / .delay()函数来实现在字符之间等待一段时间的功能,以及一些相关的性能优化的建议。