javascript - 消除键盘输入的抖动？

Question

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

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

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

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

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

以下是我尝试将 debounce 函数与我之前提供的代码片段结合使用来停止搜索的一些方法，但没有一个有效:

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 中，并收到此新错误:

未捕获类型错误:fn 不是函数

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

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