代码之家  ›  专栏  ›  技术社区  ›  johnny_mac

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

  •  0
  • johnny_mac  · 技术社区  · 7 年前

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

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

    数据集看起来像这样,可能有数千个元素:

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

    在不太疯狂的情况下,有什么更好、更有效的方法呢?

    1 回复  |  直到 7 年前
        1
  •  0
  •   pritesh    7 年前

    您可以使用 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 每次击键时,它只会在经过特定毫秒后调用,您可以在debounce函数中设置该毫秒。

    你可以这样使用它

    var myEfficientFn = debounce(onChange, 400);
    

    因此,如果用户停止键入400ms,则只会调用 onChange公司 功能,而不是在每次击键时。