question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:12
  • Comments:36 (24 by maintainers)

github_iconTop GitHub Comments

11reactions
markcoopercommented, Nov 14, 2016

Please do this! This is a feature that is needed quite often

5reactions
andrevcfcommented, Jan 26, 2017

+1

Read more comments on GitHub >

github_iconTop Results From Across the Web

Event Debouncing and Throttling in JavaScript
The aim is to limit the number of times a function is called in response to events. In this article, I'll explain how...
Read more >
Debouncing and Throttling Explained Through Examples
Use debounce, throttle and requestAnimationFrame to optimize your event handlers. Each technique is slightly different, but all three of them ...
Read more >
Debounce vs Throttle: Definitive Visual Guide - Redd Developer
A complete guide to learn the difference between debounce and throttle using visual examples. Never confuse the two again.
Read more >
vue.js - How to implement debounce in Vue2? - Stack Overflow
I am using debounce NPM package and implemented like this: <input @input="debounceInput"> methods: { debounceInput: debounce(function (e) { this.
Read more >
keywords:debounce - npm search
The lodash method `_.debounce` exported as a module. ... Queue that Supports Delay/DelayExecutor/Throttle/Debounce/Concurrency Features Powered by RxJS/IxJS.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found