Javascript jquery搜索栏上的等待时间过长

你好，我有一个搜索表单的问题

我在DOM中有一个搜索函数（这不是AJAX请求）。 当用户在表单中键入（事件输入）时，必须执行此函数。 但是这个函数需要很多时间来执行，所以搜索栏在这段时间内被阻塞，因此用户在几秒钟内无法键入任何内容。所以我想要的是让搜索函数运行，但不阻塞搜索栏。你有办法解决这个问题吗？ PS：我只能用javascript或jquery编写

我的代码

<script type="text/javascript">
  $("#search_bar").on("input", function(e) {
    var value = e.currentTarget.value.trim().toLocaleUpperCase();
    do_research(value);
  })

  function do_research(value) {
    $("tr").each(function(index, element) {
      if (index > 0) {
        var first_name = element.cells[1].innerText.trim().toLocaleUpperCase();
        var last_name = element.cells[2].innerText.trim().toLocaleUpperCase();
        if (first_name.indexOf(value) == -1 && last_name.indexOf(value) == -1) {
          $(element).fadeOut(0);
        } else if (!$(element).is(":visible")) {
          $(element).fadeIn(0);
        }
      }
    })
  }
</script>

$（“#搜索栏”）。打开（“输入”，函数（e）{
var value=e.currentTarget.value.trim（）.toLocaleUpperCase（）；
做研究（价值）；
})
功能研究（价值）{
$（“tr”）。每个函数（索引、元素）{
如果（索引>0）{
var first_name=element.cells[1].innerText.trim（）.toLocaleUpperCase（）；
var last_name=element.cells[2].innerText.trim（）.toLocaleUpperCase（）；
if（first_name.indexOf（value）=-1&&last_name.indexOf（value）=-1）{
$（元素）。淡出（0）；
}else if（！$（元素）.is（“：可见”））{
$（元素）.fadeIn（0）；
}
}
})
}

我曾经做过几次类似的事情，所以我想出了4个有用的方法；按照影响最大的顺序：

去盎司

提前中止

重复使用dom元素

分页输出

天真

对于基线比较，这里有一个简单的方法。试着输入简短的单词（例如“hello”），然后注意到UI冻结了

let$=q=>document.querySelector（q）；
让slowComputeOutput=inputStr=>{
设s=0；
对于（设i=0；i<2000000；i++）
s+=Math.sin（Math.sqrt（i）**Math.atan2（i，i+1））%3；
s=[…inputStr].reduce（（a，b）=>a+b.charCodeAt（0），s）；
返回inputStr+''+数学舍入；
};
让updateOutput=（）=>{
让line=document.createElement（'div'）；
line.textContent=slowComputeOutput（$（'#input'）.value）；
$（“#输出”）。追加（行）；
};
$（“#input”）.addEventListener（'input'，updateOutput）
我没有证据证明这比您的DOM更快，但它应该更快

我缓存表中没有第一行的行（不需要索引0）
ss（大人物）
使用表格id（使设置稍微快一点-微观优化）
以简单的方式消除反弹-可在时间上配置
debounceRate:500
在命名空间中本地化功能，而不是在“窗口”中查找每个函数调用
在名称匹配为空时短循环（点击backspace清除）
.show（）.hide（）
作为最快最简单的方法（运行的代码更少），因为您有
0
持续时间
在我获得列表后显示/隐藏列表，而不是单独显示-可能会减少DOM搅动/重新流动

（函数（搜索器、jQuery、未定义）{
var searchThings={
行：{}，
搜索值：“”，
去盎司：{}，
脱胶量：500
};
var filtername=函数（索引，行）{
if（searchThings.searchValue==“”）返回false；
让notmatchfirst\u name=row.cells[1].innerText.trim（）
.Tolocalueppercase（）
.indexOf（searchThings.searchValue）=-1；
让notmatchlast_name=row.cells[2].innerText.trim（）
.Tolocalueppercase（）
.indexOf（searchThings.searchValue）=-1；
返回（notmatchfirst\u name和¬matchlast\u name）；
}
var do_search=函数（值）{
让nomatch=searchThings.rows.filter（filtername）；
让showme=searchThings.rows.filter（函数（索引，元素）{
return！filtername（索引，元素）；
});
nomatch.hide（）；
showme.filter（“：hidden”）.show（）；
}
$（“#搜索栏”）。打开（“输入”，函数（e）{
clearTimeout（searchThings.debounce）；
searchThings.debounce=setTimeout（函数（）{
searchThings.searchValue=e.target.value.trim（）.toLocaleUpperCase（）；
do_search（searchThings.searchValue）；
}，搜索东西。去奶油）；
});
searcher.setup=函数（）{
//除第一行以外的所有行（不需要跳过索引==0）
searchThings.rows=$（“#searchMe”）
.find（'tbody'））
.查找（“tr”）。切片（1）；
}
})（window.searcher=window.searcher |{}，jQuery）；
window.searcher.setup（）
tr{
边框：纯蓝1px；
}

头？0
跳过我
还有华夫饼干
1.
不要跳过我
还要保存华夫饼干
2.
奶酪
还有啤酒华夫饼干
1A
试验
保持和平
3.
奶酪块
大杯啤酒
4.
约翰
雌鹿
5.
吉姆
雌鹿
我认为这不是一个JS问题。我猜你有很多条目，你的浏览器无法处理
褪色
所有这些条目都非常快。这使得它在输入字段中的输入速度变慢。请在这里展示一个HTML示例以获得最佳答案