javascript - 大数据集导致自定义搜索框滞后于 jquery 数据表

Question

在测试包含 60,000 行和 6 列的数据表(启用延迟渲染)时，我们在自定义搜索框(不是 Datatables 提供的默认搜索)中键入内容时遇到了延迟。为了澄清，发生的事情是我开始在自定义搜索框中输入“zuz”，在输入“u”后，它应该需要一秒钟才能真正出现，并且不会立即出现。

基本上，我当前的代码具有它，以便它在每个 keyup 事件后进行搜索并重新绘制。

searchBoxOnKeyup: function(e) {
    var table = this.getCurrentTable();
    table.search($(e.target).val()).draw();
}

我认为发生的情况是表格在我输入下一个字符之前绘制，因此下一个字符需要更长的时间才能实际显示在搜索框中。

我实际上已经使用了内置搜索框，它可以毫无问题地处理 60,000 行并显示输入，没有任何延迟。我无法使用默认内置搜索框的原因是 UI 设计将搜索框置于不同位置，旁边有其他控件(例如:选择和复选框)

到目前为止我尝试过的是限制绘制操作:

var search_term = $(e.target).val();

var search = $.fn.dataTable.util.throttle(
    function ( search_term ) {
          console.log("running search on ", search_term);
          table.search( search_term ).draw();
     },
     2500
);

if (search_term.length > 3 || search_term.length === 0) {
    search(search_term);
}

但是，这并没有解决问题，因为在 2.5 秒后调用第一个 draw() 后，我仍然会遇到输入延迟的问题。

如果没有在输入整个输入后绘制表格，是否有解决方法可以使用户输入不会因表格必须重新绘制而滞后？

Answer 1

我找到的解决方法基于 xiaohouzi79 给出的这篇 SO 帖子的答案之一:Run javascript function when user finishes typing instead of on key up?

基本上，我将搜索包装在一个函数中，然后使用 setTimeout 仅在 500 毫秒后且仅在用户在搜索框中输入完毕后才执行该函数。

这是代码:

// Note: this.typing_timer is declared in initialization code elsewhere
searchBoxOnKeyup: function(e) {
     var table = this.getCurrentTable();
     var search_term = $(e.target).val();

     var searchFunc = function() {
          table.search(search_term).draw('page');
          // rest of the logic left out for brevity
     }

     clearTimeout(this.typing_timer)
     this.typing_timer = setTimeout(searchFunc, 500)
}

如果用户仍在输入，搜索将不会启动，因为每次 keyup 事件发生时我们的 clearTimeout 调用都会重置计时器。