change.delegate 非常慢

Question

我有一个对象，它有两个对象数组，如下所示：

Interests = {
   MostInterests: [],
   DistinctInterests: []
};

我还有一个输入，当更改时，使用函数来搜索 Interests.DistinctInterests 中的元素，但看起来 change.delegate="function()" 需要很长时间才能触发。

<input ref="textsearch" change.delegate="searchInterest($event.target.value)" type="text" />

searchInterest(value){
         console.log('SEARCH');
         this.searchedInterests = [];
         var i = 0, j = 0;;
         var upperValue = value.toUpperCase();
         for(i = 0 ; i < this.Interests.DistinctInterests.length ; i++){
             if(this.Interests.DistinctInterests[i].normalizedName.indexOf(upperValue) !=-1){
                 this.searchedInterests[j] = this.Interests.DistinctInterests[i];
                 j++;
             }
         }
         console.log('END SEARCH');
     }

目标是使用

this.searchedInterests

中的元素更新视图，其中包含与搜索文本匹配的项目。

我不知道这是 Aurelia 问题还是 JavaScript 性能问题。我也尝试过 $.each() 函数。

PS：列表包含50个元素。

Answer 1

仅当用户提交对元素值的更改时才会触发

change

事件。

将

承诺

视为CTRL+Z步骤

这就是你的函数需要更多时间执行的原因：它只是没有被调用。

---

相反，通过使用

input

 事件，每次值更改时都会调用您的函数。

<input ref="textsearch" input.delegate="searchInterest($event.target.value)" type="text" />