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事件仅被解雇when a change to the element's value is committed by the user。

将提交视为CTRL+Z步骤

这就是你的功能需要更多时间才能执行的原因：它没有被调用。

相反，通过使用input事件，每次值更改时都会调用您的函数。

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

change.delegate非常慢

1 个答案: