去抖动 Keyup 输入？

Question

我正在使用 Kendo UI 对数据库中的一堆数据进行网格显示。附加到这个网格，我有一个搜索栏。现在，以下代码在网格中搜索搜索栏中的输入类型：

searchBar = $("#search");
searchBar.keyup(() => {
    const term = searchBar[0].value;
    searchGrid(term, "#Grid", filters);
});

searchGrid 的工作原理并不重要。这里重要的是事件绑定到 keyup：当用户键入时，我希望网格立即过滤。我不希望他们输入他们的选择，然后按下按钮进行搜索——这不是我的用例。我需要它在他们输入时自动过滤。

也就是说，这就是我的问题所在。在其中存储有规律数据量的网格上，这没有问题。它很好用。但是，在我当前工作的特定网格中，有超过 1000 个条目。由于搜索是通过 keyup 绑定的，因此它在尝试过滤数千次时变得非常慢。有人告诉我，如果我在用户键入时使用去抖动来停止搜索大约 200 毫秒，而不是在每次字母更改时触发它，我可以改进很多。唯一的问题是，我似乎根本无法使去抖动工作。这是我粘贴到我的代码库中的去抖功能：

function debounced(delay, fn) {
    let timerId;
    return function (...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
        }, delay);
    }
}

以下是我尝试将去抖动功能与我之前提供的代码片段结合使用以停止搜索的一些方法，none 有效：

searchBar = $("#search");
searchBar.keyup(() => {
    const term = searchBar[0].value;
    debounced(200, searchGrid(term, "#Grid", filters));
});

searchBar = $("#search");
searchBar.keyup( () => debounced(200, searchGrid(searchBar[0].value, "#Grid", filters)));

这些只是正常过滤网格，与我提供的第一个片段没有任何不同。所以，很明显，去抖动根本没有发生。我尝试完全删除箭头函数并将去抖动函数传递给 keyup，并得到了这个新错误：

Uncaught TypeError: fn is not a function

所以我对如何使用去抖动有点不知所措。任何帮助将不胜感激。

Answer 1

我在之前的项目中使用过这段代码

  var timeout;
  var delay = 500;   // 100 ms

  $('#searchTerm').keyup(function(e) {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(function() { performSearch(); }, delay);
  });

  function performSearch() {
    var panelbar, filter, searchRegEx, $span;

    filter = $("#searchTerm").val();
    if (filter == lastFilter) return;

    if (filter.length < 3) return;  // only search 3 or more characters in searchTerm

    … the rest is unimportant … 

    lastFilter = filter;
  }

去抖动 Keyup 输入？

Debouncing Keyup Input?

javascript

kendo-ui

kendo-grid

searchbar

debouncing