Ember.js：意外Ember.run.debounce行为与观察者...在去抖动时间段过去后多次触发 [英] Ember.js: Unexpected Ember.run.debounce behavior with observor ... fires multiple times after debounce period elapses

问题描述

使用Ember.run.debounce我有一些困难。我会第一个承认我可能会误会如何使用去抖动。

我的问题：

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

所以这里是观察者的样子：

  inputTextObservor：function （）{
 //构建正则表达式并执行其他逻辑
} .observes（'inputText'）
  

我以为会工作：

我以为我可以用Ember包装我的正则表达式创建逻辑。 run.debounce，这样可以防止在用户打字时创建正则表达式。

  inputTextObservor：function（）{
 Ember.run.debounce（this，function（）{
 //构建正则表达式并执行其他逻辑
 //只有在用户停止键入
 //时，才应调用2000毫秒
}，2000）
} .observes（'inputText'）
  

实际发生的情况：

使用上面的设置，debounce内的正则表达式创建逻辑不会执行2000毫秒（如se t在去抖动调用中），然后每次观察者被触发执行一次。所以例如，如果去抖动时间是2000毫秒，并且用户正在键入HelloWorldOfEmber，但是它们每1000毫秒键入1个字符（即，相当慢），我会期望去抖动方法在2000毫秒之后被调用用户完成输入HelloWorldOfEmber。

实际发生的是，在2000毫秒之后，执行去抖动调用，并且每次用户键入时都会执行字符。

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

< a href =http://jsbin.com/gagocufofavi/1/edit?html,css,js,output =nofollow> http://jsbin.com/gagocufofavi/1/edit?html,css， js，输出

问题：

$ b $我认为去抖动通常用于防止功能触发，直到触发功能的事件停止发生（在一个设定的时间窗口内），并且它只应该触发一次。

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：----------------------- -------- 
  

谢谢！

解决方案

去抖动方法将检查传递的函数是否与之前发送的函数相同。它使用发送的先前方法和发送的当前方法的'==='检查。

这是检查的相关行。

这是工作演示。

创建函数并将其分配给变量，并将该变量传递给去抖动方法。

  App.IndexController = Ember.Controller。扩展（{
事件：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'）
}）; 
  

I'm having some difficulty with using Ember.run.debounce. I'll be the first to admit that I'm probably misunderstanding how debounce is supposed to be used.

My Problem:

I have an input text box and I want to construct a regular expression based on the text in the input box. I setup an observer on the input helpers value field but this observor fires everytime the input changes. What I really want is to only build the regexp if the user has stopped typing for X amount of time.

So here's what the observer looks like:

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

What I thought would work:

I thought I could wrap my regexp creation logic in the observor with Ember.run.debounce and that this would prevent the regexp from being created while the user was typing.

  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')

What actually happens:

Using the setup above, the regexp creation logic inside debounce doesn't execute for 2000 milliseconds (as set in the debounce call) but then executes once for everytime the observer was fired. So for example, if the debounce time is 2000 milliseconds, and the user is typing "HelloWorldOfEmber", but they type 1 character every 1000 milliseconds (i.e., pretty slowly), I would expect that the debounce method is called once 2000 milliseconds after the user finishes typing "HelloWorldOfEmber".

What actually happens is that after 2000 milliseconds, the debounce call is executed and from there on out is executed for every time the user typed a character.

I recreated my setup with a very simple jsbin. The debounce time in the jsbin is set to 2000 milliseconds. If you type into the input field you'll notice that after 2000 milliseconds the debounced function is fired once for every character you typed.

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

Questions:

I thought that debounce was typically used to prevent a function from firing until the event triggering the function stops occurring (within a set time window), and that it should only fire once.

1. Is my understanding of Debounce completely off?
2. Is my code completely wrong?
3. How can I achieve the desired behavior?

I'm using the following versions:

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: ------------------------------- 

Thank you!

解决方案

The debounce method will check to see if the passed function is the same as the one sent before. It uses a '===' check on the previous method sent and the current method sent.

Here is the relevant line that does the check.

Here is the working demo.

Create a function and assign it to variable and pass that variable to the debounce method.

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')
});

这篇关于Ember.js：意外Ember.run.debounce行为与观察者...在去抖动时间段过去后多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！