去抖键输入？

Question

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

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

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

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

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

以下是我尝试将 debounce 功能与我之前提供的 sn-p 结合使用以停止搜索的一些方法，但均无效：

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)));

这些只是正常过滤网格，与我提供的第一个 sn-p 没有任何不同。所以，显然，去抖根本没有发生。我尝试完全删除箭头函数，只是将去抖动函数传递到 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;
  }