javascript - 搜索项目导致滞后

Question

我有以下问题。假设我有这样的 DOM。

<div class="results">
  <div class="result">
    <div class="title">Aaa</div>
  </div>
  <div class="result filtered-out">
    <div class="title">Aab</div>
  </div>
  <div class="result">
    <div class="title">Aac</div>
  </div>
  <div class="result">
    <div class="title">Aad</div>
  </div>
  <div class="result">
    <div class="title">Aae</div>
  </div>
</div>

和这样的输入框

<input type="text" id="search">

现在我尝试使用由此定义的简单函数来过滤结果

var searchBox = $(this);
searchBox.keyup(function(){
  var searchBox = $(this);
  var items = $(".results .result:not(.filtered-out)");
  items.each(function(){
    var title  = $(this).find(".title").html();
    if(title.toLowerCase().indexOf(searchBox.val().toLowerCase())!== -1)
      $(this).show();
    else
      $(this).hide();
  });
});

所以问题是结果列表很长，介于 100 到 200 个元素之间，每当我在搜索输入中键入内容时，代码都会执行很长的时间。也许大约 2-3 秒。有没有其他方法可以解决这种“滞后”？感谢您的任何建议!

编辑 可能是延迟脚本执行或异步脚本执行(如在 ajax 中)？

Answer 1

使用 DOM 作为数据源通常不是一个好主意，它不是为此而设计的，因此速度很慢。我个人建议使用小型 MVVM 库或类似的东西，这样您就不必自己手动管理 DOM。
我用过 Vue.js下面，但您也可以使用任何类似的解决方案。将数据保存在代码中将使您可以更快地对其进行操作，因为您不必一直重新请求它并且避免做大量的修改工作。以下所有操作均在 1000 个对象上完成:

var items = [];
for (var i = 0; i < 1000; i++) {
  items.push({
    title: 'Item #' + i
  });
}
var v = new Vue({
  el: '#list',
  data: {
    items: items,
    input: ""
  },
  computed: {
    filteredItems: function() {
      var value = ("" || this.input).trim().toLowerCase();
      if (!value.length) return this.items;
      return this.items.filter(function(item) {
        return item.title.toLowerCase().indexOf(value) !== -1;
      });
    }
  }
});

ol {
  list-style: none;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<div id="list">
  <input placeholder="Search" v-model="input" />
  <ol>
    <li v-repeat="filteredItems">{{title}}</li>
  </ol>
</div>