消除 ember 搜索输入的抖动

Question

我想在 ember 应用程序中的搜索输入中添加去抖功能。我在使用去抖方法时遇到问题。

我的搜索如下所示：

{{input type="search"
         placeholder="Search by XYZ"
         value=search
         id="search"
}}

我的路线文件：

export default Ember.Route.extend({
    queryParams: {
    search:{refreshModel: true}
}

我的控制器文件：

export default Ember.Controller.extend({
    search: "",

Answer 1

使用现有的输入助手实现所需的去抖行为非常困难，因为它会立即更新值。

1. 因此，我鼓励您使用普通的输入 html 元素并使用 keyUp 事件来侦听并在 debounce 方法中手动设置值。

内部控制器，

import Ember from 'ember';
export default Ember.Controller.extend({
  queryParams:['easyFilter'],
  easyFilter:'',
  setEasyFilterLazily(value){
    this.set('easyFilter',value);
  },
  actions:{    
     handleEasyFilterEntry(value){   
      Ember.run.debounce(this, this.setEasyFilterLazily,value, 500);
    }
  }
});

创建了 twiddle进行演示。

2. 另一个有趣的选择是使用ember-concurrency addon。需要使用执行助手而不是操作助手，

<input type="text" value={{filterValue}} oninput={{perform triggerToUpdateFilter value='target.value'}}>

和

triggerToUpdateFilter: task(function*(value) {
  yield timeout(1000); //here it will wait for 1000 ms before setting
  this.set('easyFilter',value);
}).restartable(),

由于此任务是restartable这样的，当您在 1000 毫秒内快速键入时，它会重新启动。