Ваша проблема
Вы хотите:
- Вызов функции для нажатия клавиши
- Ограничение вызовов функций до одного в секунду
Мой дизайн
Я бы использовал для этого наблюдаемые. Шаблон будет выглядеть следующим образом:
- Создать прокси
Subject
для keydown
событий - Предоставить прокси
Subject
как Observable
с оператором throttleTime
- Вызов функции из прокси
Observable
подписка
Моя реализация
Создание класса для переноса темы. Он будет иметь простой интерфейс:
keyDown$: Observable<any>
- прокси Observable
keyDown()
- вызываться при каждом keydown
событии complete()
- вызывается для уничтожения
export class KeyThrottle {
constructor(duration: number) {
this.keyDown$ = this._keyDown$.pipe(
throttleTime(duration)
);
}
keyDown$: Observable<any>;
private _keyDown$ = new Subject();
complete(): void {
this._keyDown$.complete();
}
keyDown(): void {
this._keyDown$.next();
}
}
Вы создадите новый экземпляр для каждого ключа, который хотите обработать в своем компоненте:
private throttles = {
arrowDown: new KeyThrottle(1000),
arrowUp: new KeyThrottle(1000)
};
ngOnInit() {
this.throttles.arrowDown.keyDown$.subscribe(() => {
this.logSomething();
});
this.throttles.arrowUp.keyDown$.subscribe(() => {
this.logSomethingElse();
});
}
ngOnDestroy() {
this.throttles.arrowDown.complete();
this.throttles.arrowUp.complete();
}
private logSomething() {
console.log('key down pressed');
}
private logSomethingElse() {
console.log('key up pressed');
}
Ваш HTML имеет обработчик события для ключа, который вы хотите обработать.
<div tabindex="-1"
(keydown.arrowdown)="throttles.arrowDown.keyDown()"
(keydown.arrowup)="throttles.arrowUp.keyDown()">
<p>
Open the console. Click here. Press and hold (Arrow-Up/Down).
</p>
</div>
DEMO: https://stackblitz.com/edit/angular-tj2ajr