Question

我有一个onChange函数，每次用户在文本字段中输入内容时都会调用该函数。我们的想法是自动完成或提供包含用户输入文本的选项列表，并让他们从返回的选项中进行选择。这就是我所拥有的：

dataSet.filter(option => option.label.toLowerCase().indexOf(input.toLowerCase()) !== -1);

dataSet看起来像这样，可能有数千个元素：

[
  {
    label: "I'm typing this",
    value: "1234567890"
  },
]

什么是更好，更有效的方法，而不会太疯狂？

Answer 1

您可以使用debounce as explained in this post。

//返回一个函数，只要它继续被调用，将不会被触发。该函数将在停止调用后被调用 N毫秒。如果传递immediate，则触发该函数前沿，而不是尾随。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

你可以从中受益 - 而不是在每次击键时调用onChange，它只会在经过一定时间后调用，你可以在去抖动功能中设置。

你可以像

一样使用它

var myEfficientFn = debounce(onChange, 400);

因此，如果用户已停止输入400ms，则只会调用onChange函数而不是每次按键。

搜索对象值数组的最有效方法

1 个答案: