Proposal: declaring rate-limited event handlers (debounce, throttle)

[jelbourn]

It's very common to need to rate-limit DOM events that fire too quickly, such as scroll or mousemove for performance reasons. In the ES5 world, it is very easy to create this kind of handler. For example, if you were using underscore:

<widget (movemove)="checkHoverPosition($event)">

Widget.prototype.checkHoverPosition = _.debounce(function(event) {
  // ...
}, 300);

However, in ES6 / TypeScript, the class syntax does not have a way to define a method based on the output of some function like this. You can still use the ES5 syntax, but that totally kills the hip vibe. Not to mention that this doesn't work for Dart at all.

We could solve this by introducing rate-limiters (or any of kind of similar function) for event handlers into Angular itself with a syntax something like:

<widget (movemove)="checkHoverPosition($event) | debounce:300">
<widget (movemove)="checkHoverPosition($event) | throttle:300">

These rate-limiters are needed by the material components, so it's only a question of whether Angular will support them directly or if the components have to roll our own rate limiting.

[mhevery]

@vsavkin Do you have an opinion?

I think this should not be the concern of angular but rather of some third party plugin, as there could be lots of different ways you may want to limit this, and I would rather not get into this business. Also | is already used for pipe syntax so it can't be reused here.

[vsavkin]

Since there are few events that need to be handled this way (those are not really events, but rather continuous behaviors), I would prefer not to bake this mechanism into the framework unless we have to. Imo it should be done on a lower-level.

[matanlurey]

Jeremy, couldn't you create a function at runtime in ES6, e.g.?

@View({
  template: '<widget (movemove)="onMouseMove($event)">'
})
class Widget {
  onMouseMove: Function;

  constructor() {
    this.onMouseMove = _.debounce(this.checkHoverPosition, 300);
  }

  checkHoverPosition(event) {
    ...
  }
}

[jelbourn]

The method has to be on the prototype, otherwise you're creating a copy of it for every component instance.

[PatrickJS]

this is why decorators are awesome

@Component({ selector: 'widget' })
@View({
  template: '<div (movemove)="onMouseMove($event)"></div>'
})
class Widget {
  onMouseMove: Function;

  @debounce(300)
  onMouseMove(event: Event) {
    //...
  }
}

[tbosch]

The only problem are zones. We don't want to trigger dirty checking when
the denouncing decides to ignore the event.

doing denouncing inside of an event handler in a directive or component
will always trigger change detection, as our event handlers run inside the
Angular zone.

So I think we need to think about this a little more...

On Thu, May 14, 2015 at 7:27 AM PatrickJS notifications@github.com wrote:

this is why decorators are awesome

@view({
template: '<widget (movemove)="onMouseMove($event)">'
})class Widget {
onMouseMove: Function

;

constructor() {
this.onMouseMove = this.checkHoverPosition;
}

@debounce(300)
checkHoverPosition(event) {
//...
}
}

—
Reply to this email directly or view it on GitHub
#1773 (comment).

[jelbourn]

@tbosch that's a very good point

@vsavkin this kind of rate limiting is very common. Looking at the current material design components, some uses:

• Text entry into the autocomplete
• Text entry into md-input (for auto-resizing a textarea element)
• Window resize events for several components (such as drawing ticks for a slider)
• Scrolling events for things (headers, etc) that are "stickied"
• For parent components doing something based on the addition or removal of a child (such as a re-layout)

[vicb]

If the implementation has not changed the event handler actually runs in the outer zone.

In the outer zone, we test if the event target is our actual element. Only when they match, we execute code in the angular zone which triggers the CD.

May be we can generalize the target = actual test with some more generic predicate support that would also work w/ debounce ?