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/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
用JS实现飞机大战小游戏
Jun 09 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
网站当前的在线人数
2006/10/09 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python pandas库中的isnull()详解
2019/12/26 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
十佳护士获奖感言
2014/02/18 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python pandas求方差和标准差的方法实例
2021/08/04 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
Python实现双向链表基本操作
2022/05/25 Python