Ember.js:观察者出现意外的 Ember.run.debounce 行为...在反跳期过后多次触发

Question

我在使用 Ember.run.debounce 时遇到一些困难。我将是第一个承认我可能误解了如何使用去抖动的人。

我的问题:

我有一个输入文本框，我想根据输入框中的文本构造一个正则表达式。我在输入助手值字段上设置了一个观察器，但每次输入更改时该观察器都会触发。我真正想要的是仅在用户停止输入 X 时间的情况下才构建正则表达式。

这就是观察者的样子:

  inputTextObservor: function(){
      //Build Regular Expression and do other logic
  }.observes('inputText')

我认为可行的方法:

我认为我可以使用 Ember.run.debounce 将我的正则表达式创建逻辑包装在观察器中，这样可以防止在用户键入时创建正则表达式。

  inputTextObservor: function(){
    Ember.run.debounce(this, function(){
      // Build Regular Expression and do other logic
      // should only be called if the user stops typing 
      // for 2000 milliseconds
    }, 2000)
  }.observes('inputText')

实际发生的情况:

使用上面的设置，debounce 内部的正则表达式创建逻辑不会执行 2000 毫秒(如 debounce 调用中设置的那样)，但每次观察者被触发时都会执行一次。例如，如果去抖时间为 2000 毫秒，并且用户正在键入“HelloWorldOfEmber”，但他们每 1000 毫秒键入 1 个字符(即非常慢)，我预计去抖方法会在 2000 毫秒后调用一次。用户完成输入“HelloWorldOfEmber”。

实际发生的情况是，2000 毫秒后，将执行 debounce 调用，并从那时起，每次用户键入字符时都会执行 out。

我用一个非常简单的 jsbin 重新创建了我的设置。 jsbin 中的去抖时间设置为 2000 毫秒。如果您在输入字段中输入内容，您会注意到 2000 毫秒后，您输入的每个字符都会触发去抖动函数一次。

http://jsbin.com/gagocufofavi/1/edit?html,css,js,output

问题:

我认为去抖通常用于防止函数触发，直到触发函数的事件停止发生(在设定的时间窗口内)，并且它应该只触发一次。

1. 我对 Debounce 的理解完全错误吗？
2. 我的代码完全错误吗？
3. 如何实现所需的行为？

我正在使用以下版本:

DEBUG: ------------------------------- ember.js:3911
DEBUG: Ember      : 1.6.1 ember.js:3911
DEBUG: Handlebars : 1.3.0 ember.js:3911
DEBUG: jQuery     : 1.10.2 ember.js:3911
DEBUG: ------------------------------- 

谢谢!

Answer 1

debounce 方法将检查传递的函数是否与之前发送的函数相同。它对先前发送的方法和当前发送的方法使用“===”检查。

Here is the relevant line that does the check.

Here is the working demo.

创建一个函数并将其分配给变量，然后将该变量传递给 debounce 方法。

App.IndexController = Ember.Controller.extend({
  events: Ember.A(),

  createRegExp: function() {
    console.info(this.get('inputText'));
    this.get('events').pushObject(this.get('inputText'));
  },

  inputTextObservor: function(){
    Ember.run.debounce(this, this.createRegExp, 2000);
  }.observes('inputText')
});