如何使用 debouncetime 防止 Ionic 4 中的多次点击？

Question

我试图避免在 ionic 4 中双击或双击按钮，因为它应该只在单击时触发操作。如果我双击，我希望一个动作被触发一次而不是 2 次。我尝试了几个选项，例如禁用按钮、settimeout，但没有任何效果。在寻找更好的解决方案时，我发现许多论坛建议在 Angular 中使用 debounceTime。

我按照中建议的答案尝试创建指令，但单击 "debounceClick" 时出现以下错误。

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'debounceTime' since it isn't a known property of 'button'. ("
</ion-content>

<button appIonCLick (debounceClick)="log()" [ERROR ->][debounceTime]="700">Throttled Click</button>

下面是我创建的指令

import {
  Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit,
  Output
} from '@angular/core';
import { Subject } from 'rxjs';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';


@Directive({
  selector: '[appIonCLick]'
})
export class IonCLickDirective 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);
  }
}

下面是 HTML

<button appIonCLick (debounceClick)="log()" [debounceTime]="700">Debounce Click</button>

如果我做错了什么，有人可以帮助我吗？我没有运气为离子按钮点击搜索 debounceTime。任何帮助表示赞赏！

Answer 1

尝试在声明部分导入指令'IonCLickDirective' 您需要使用它的模块。
<button appIonCLick (debounceClick)="log()" debounceTime="700">Debounce Click</button> 试试这个 [debounceTime] -> debounceTime

Answer 2

而且成功了！

我在 app.module.ts 中导入了 'IonCLickDirective'，但没有在我使用此指令 IonCLickDirective 的页面组件中导入。一旦我将它从 app.module.ts 中删除并导入页面组件 module.ts 的声明部分，它就像一个魅力！

我还尝试使用 throttletime 进行同样的操作，效果更好，因为它触发动作并等待而不是等待和触发 debounceTime！

非常感谢你帮我解决了我苦苦挣扎了一周的问题！

Answer 3

这里只是一个改进

    this.subscription = this.clicks.pipe(
      debounceTime(this.debounceTime), first()
    ).subscribe(e => this.debounceClick.emit(e));
  }

如果我们使用 first() 则不需要退订。这是因为它完成了链并因此触发了处置处理程序。

如何使用 debouncetime 防止 Ionic 4 中的多次点击？

How to prevent multiple clicks in Ionic 4 using debouncetime?

javascript

rxjs

ionic2

angular

ionic4