Angular click debounce
Solution 1
Use the takeUntil
operator :
export class AppComponent {
name = 'Angular';
calls = new Subject();
service = {
getData: () => of({ id: 1 }).pipe(delay(500)),
};
click() {
this.calls.next(true);
this.service.getData().pipe(
takeUntil(this.calls),
).subscribe(res => console.log(res));
}
}
Stackblitz (open your console to check the logs)
Solution 2
This is answer partially I found in internet, but I open to better solutions (or improve to below solution(directive)):
In internet I found appDebounceClick
directive which helps me in following way:
I remove update
from add
in .ts file:
add(num) {
this.myValue +=num;
}
And change template in following way:
<div
appDebounceClick
(debounceClick)="update()"
(click)="add(1)"
class="btn-plus"
> -
</div>
<div class="txt"> {{ myValue }} </div>
<!-- similar for btn-minus -->
BONUS
Directive appDebounceClick
written by Cory Rylan (I put code here in case if link will stop working in future):
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import { debounceTime } from 'rxjs/operators';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Input() debounceTime = 500;
@Output() debounceClick = new EventEmitter();
private clicks = new Subject();
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = this.clicks.pipe(
debounceTime(this.debounceTime)
).subscribe(e => this.debounceClick.emit(e));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('click', ['$event'])
clickEvent(event) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}
Solution 3
A helper function --
export const debounced = (cb, time) => {
const db = new Subject();
const sub = db.pipe(debounceTime(time)).subscribe(cb);
const func = v => db.next(v);
func.unsubscribe = () => sub.unsubscribe();
return func;
};
Then an example use could be:
import { Component, OnInit } from '@angular/core';
import { debounced } from 'src/helpers';
@Component({
selector: 'app-example',
// Click calls `debouncedClick` instead of `myClick` directly
template: '<button (click)="debouncedClick($event)">Click This</button>'
})
export class Example implements OnDestroy {
debouncedClick; // Subject.next function
constructor() {
// Done in constructor or ngOnInit for `this` to resolve
this.debouncedClick = debounced($event => this.myClick($event), 800);
}
// Called after debounced resolves (800ms from last call)
myClick($event) {
console.log($event);
}
ngOnDestroy() {
// Stay clean!
this.debouncedFunc.unsubscribe();
}
}
Could also reverse the usage, calling the 'myClick' on click and have the debounced
callback perform the desired action. Dealer's choice.
Personally I this for (keyup)
events as well.
Unsure if the unsubscribe is really necessary - was quicker to implement than to research the memory leak :)
Solution 4
You can implement this with a setTimeout
if not want to use rxjs observable
instance. This would be an ideal implementation with memory leak cleanup on ngOnDestroy
:
@Component({
selector: "app-my",
templateUrl: "./my.component.html",
styleUrls: ["./my.component.sass"],
})
export class MyComponent implements OnDestroy {
timeoutRef: NodeJS.Timeout;
clickCallback() {
clearTimeout(this.timeoutRef);
this.timeoutRef = setTimeout(()=> {
console.log('finally clicked!')
}, 500);
}
ngOnDestroy(): void {
clearTimeout(this.timeoutRef);
}
}
Solution 5
I ended up using a simplified version of the DebounceClickDirective
posted above. Since debounceTime
operator doesn't support leading/trailing options, I decided to use lodash
. This eliminates the delay from click to action, which in my case was opening a dialog and was pretty annoying.
Then I just use it like this <button (debounceClick)="openDialog()">
import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
import { debounce } from 'lodash';
@Directive({
selector: 'button',
})
export class DebounceClickDirective {
@Output() debounceClick = new EventEmitter();
@HostListener('click', ['$event'])
debouncedClick = debounce(
(event: Event) => {
this.debounceClick.emit(event);
},
500,
{ leading: true, trailing: false },
);
}
Related videos on Youtube
Kamil Kiełczewski
Distraught father sobs over body of son killed by Russian bombardment of Mariupol (Ukraine) https://www.youtube.com/watch?v=890z0skXQzI
Updated on June 04, 2022Comments
-
Kamil Kiełczewski almost 2 years
In my template I have a field and two buttons:
<div class="btn-plus" (click)="add(1)"> - </div> <div class="txt"> {{ myValue }} </div> <div class="btn-minus" (click)="add(-1)"> + </div>
In my component .ts file I have:
add(num) { this.myValue +=num; this.update(); // async function which will send PUT request }
The
this.update()
function putsmyValue
in the proper field in a big JSON object and sends it to a server.Problem: When a user clicks 10x in a short period of time on button plus/minus, then a request will be send 10 times. But I want to send a request only once - 0.5 sec after last click. How to do it?
-
Kamil Kiełczewski over 5 yearsIn Stackblitz every time when I click on "Simulate HTTP call" button i get immediately error "ERROR TypeError: _co.simulate is not a function"
-
Admin over 5 yearsDamn it, I renamed it --' Try again !
-
Kamil Kiełczewski over 5 yearsNow is ok. I give +1 (~15 min ago), however this solution in not so reusable as Cory Rylan directive so I will not "check" it as best answer. But thank you for your answer
-
Admin over 5 yearsI'm not here to code a directive but to give you another lead, feel free to create a directive from that ! But I understand your position and I'm totally fine with it, even though the directive is way more complicated to use than that.
-
Jason Lee over 2 yearsCan you please explain your solution a bit? It works but I can't make sense of it although I have checked the docs and played around with it.
-
Lord Midi almost 2 yearsI think it's not a good idea to use "NodeJS.Timeout" inside of an Angular application.
-
xtealer almost 2 yearsHi, just did some research and found the following resources that suggest otherwise. The issue is not related to Angular2 apps but a Typescript discussion that can apply to other frameworks. Still, will update accordingly to a "safer" types definition. 1. Typescript: What is the correct type for a Timeout? 2. TypeScript - use correct version of setTimeout node vs window