Angular中自定义Debounce Click指令防止重复点击


Posted in Javascript onJuly 26, 2017

在这篇文章中,我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令。该指令将处理在指定时间内多次点击事件,这有助于防止重复的操作。

对于我们的示例,我们希望在产生点击事件时,实现去抖动处理。接下来我们将介绍 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相关知识。首先,我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.ts 文件中:

import { Directive, OnInit } from '@angular/core';

@Directive({
 selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
 constructor() { }
 ngOnInit() { }
}


@NgModule({
 imports: [BrowserModule],
 declarations: [
  AppComponent,
  DebounceClickDirective
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Angular 指令是没有模板的组件,我们将使用以下方式应用上面的自定义指令:

<button appDebounceClick>Debounced Click</button>

在上面 HTML 代码中的宿主元素是按钮,接下来我们要做的第一件事就是监听宿主元素的点击事件,因此我们可以将以下代码添加到我们的自定义指令中。

import { Directive, HostListener, OnInit } from '@angular/core';

@Directive({
 selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
 constructor() { }

 ngOnInit() { }

 @HostListener('click', ['$event'])
 clickEvent(event: MouseEvent) {
  event.preventDefault();
  event.stopPropagation();
  console.log('Click from Host Element!');
 }
}

在上面的例子中,我们使用了 Angular @HostListener 装饰器,该装饰器允许你轻松地监听宿主元素上的事件。在我们的示例中,第一个参数是事件名。第二个参数 $event,这用于告诉 Angular 将点击事件传递给我们的 clickEvent() 方法。

在事件处理函数中,我们可以调用 event.preventDefault()event.stopPropagation() 方法来阻止浏览器的默认行为和事件冒泡。

Debounce Events

现在我们可以拦截宿主元素的 click 事件,此时我们还需要有一种方法实现事件的去抖动处理,然后将它重新发送回父节点。这时我们需要借助事件发射器和 RxJS 中的 debounce 操作符。

import { Directive, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject<any>();

  constructor() { }

  ngOnInit() {
    this.clicks
      .debounceTime(500)
      .subscribe(e => this.debounceClick.emit(e));
  }

  @HostListener('click', ['$event'])
  clickEvent(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
  }
}

在上面的代码中,我们使用 Angular @Output 属性装饰器和 EventEmitter 类,它们允许我们在指令上创建自定义事件。要发出事件,我们需要调用 EventEmitter 实例上的 emit() 方法。

但我们不想立即发出点击事件,我们想做去抖动处理。为了实现这个功能,我们将使用 RxJS 中的 Subject 类。在我们的代码中,我们创建一个主题来处理我们的点击事件。在我们的方法中,我们调用 next() 方法来让 Subject 对象发出下一个值。此外我们也使用 RxJS 中 debounceTime 的操作符,这允许我们通过设置给定的毫秒数来去抖动点击事件。

一旦我们设置好了,我们现在可以在下面的模板中监听我们的自定义去抖动点击事件。

<button appDebounceClick (debounceClick)="log($event)">
 Debounced Click
</button>

现在,当我们点击我们的按钮时,它将延迟 500 毫秒。 500毫秒后,我们的自定义输出属性将会发出点击事件。现在我们有了基本的功能,我们需要做一些清理工作,并增加一些其它的功能。

Unsubscribe

对于 RxJS 中 Observables 和 Subject 对象,一旦我们不再使用它们,我们必须取消订阅事件。如果我们没有执行取消订阅操作,有可能会出现内存泄漏。

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

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject<any>();
  private subscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.subscription = this.clicks
      .debounceTime(500)
      .subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('click', ['$event'])
  clickEvent(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
  }
}

要取消订阅,我们需要保存订阅时返回的订阅对象。当 Angular 销毁组件时,它将调用 OnDestroy 生命周期钩子,因此我们可以在这个钩子中,执行取消订阅操作。

Custom Inputs

我们指令的功能已基本齐全,它可以正常处理事件。接下来,我们将添加一些更多的逻辑,以便我们可以自定义去抖动时间。为此,我们将使用 @Input 装饰器。

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

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Input() debounceTime = 500;
  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject<any>();
  private subscription: Subscription;

  constructor() { }

  ngOnInit() {
    this.subscription = this.clicks
      .debounceTime(this.debounceTime)
      .subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('click', ['$event'])
  clickEvent(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    this.clicks.next(event);
  }
}

@Input 装饰器允许我们将自定义延迟时间传递到我们的组件或指令中。在上面的代码中,我们可以通过组件的输入属性,来指定我们希望去抖动的时间。默认情况下,我们将其设置为 500 毫秒。

<button appDebounceClick (debounceClick)="log($event)" [debounceTime]="300">
 Debounced Click
</button>

参考资源

creating-a-custom-debounce-click-directive-in-angular

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
你有必要知道的10个JavaScript难点
Jul 25 #Javascript
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
护士长竞聘书
2014/03/31 职场文书
安全标兵事迹材料
2014/08/17 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
董事长岗位职责
2015/02/13 职场文书
公司管理建议书
2015/09/14 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
python基础之文件处理知识总结
2021/05/23 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python