0

我正在尝试为广播覆盖构建一个“通知系统”。本质上，我捕获事件，将它们添加到数组中，然后运行一个观察该数组的函数。每次添加一个事件时，我都会运行一个花费给定时间的动画，将其从数组中删除，然后移动到下一个。

我发现这debounce让我成为了其中的一部分。我可以在动画运行时添加任意数量的事件，并且可以清空队列。

问题是，在处理第一个事件之前，我必须等待指定的时间（在本例中为 5 秒）。但是，当我将 debounce 设置为立即时，一切都会中断，第一个事件将立即处理，但其他任何事情都不会。

# Pool handling.
pool: []

# Function adds events to the pool array.
addEventToPool: (event, data) ->
  console.log "added #{event} with #{data} to pool!"
  @get('pool').pushObject(data)

# Function that observes the pool array and runs debounce 
# if there are any items in the pool.
observePool: (->
  Ember.run.debounce(@, @handleEvent, 5000, false) if @get('pool').length
).observes('pool.[]')

# Event handling.
handleEvent: ->
  pool = @get('pool')
  object = pool.get('firstObject')
  @set('payload', object)

  Ember.$(".event-message__#{object.event}").addClass('active')

  Ember.run.later (->
    Ember.$(".event-message__#{object.event}").removeClass('active')
    pool.removeObject(object)
  ), 2000

  console.log "Number of remaining objects: #{pool.length}."
  console.log "Objects remaining: #{JSON.stringify pool}."

我有一种感觉，我需要离开debounce来解决这个问题，但我不确定那个解决方案是什么。

如果您需要任何澄清，请告诉我！

4

1 回答 1

3

Ember.run.debounce

的目的是在最后一次没有被调用的Ember.run.debounce情况下只运行一次。debounceX seconds

它的主要用途是在用户完成输入后启动某种类型的操作 - 因此，对于某人正在输入的每个字符，您都可以调用Ember.run.debounce(handleInput, 1000)，并且您可以确定无论他们按多少次键，您的功能只会运行一次 - 在他们没有按键 1 秒之后。

它对于处理滚动事件也很有用 - 在页面上滚动时可以说有数百个滚动事件，但您只想在滚动停止后执行一些操作 - 调用debounce数百次不会运行它，直到您停止调用debounce该timeout值（例如，在这种情况下，在最后一个滚动事件之后 100 毫秒）。

这似乎与您尝试做的有点不同。

建议的解决方案

我认为您想要做的是使用 Ember.run.later。您可以将它们全部组合成一个简单地观察 pool.firstObject 的函数 - 因为您总是在拉动第一个对象并在完成后将其移除。

handleEvent: Ember.observer('pool.firstObject', function() {
  var pool = this.get('pool');
  var obj = pool.get('firstObject');
  if (obj) {
    // add class
    Ember.$(".event-message__#{object.event}").addClass('active');

    // schedule remove class for 2 seconds from now
    Ember.run.later(function() {
      Ember.$(".event-message__#{object.event}").removeClass('active');
    }, 2000);

    // schedule remove object from pool 5 seconds from now
    Ember.run.later(function() {
      pool.removeObject(obj);
      // after you've removed this object (which was firstObject)
      // pool.firstObject will change, and the handleEvent function 
      // will get kicked off again
    }, 5000);

  }
})
于 2015-04-22T23:30:55.343 回答