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 Scoping and Hoisting 翻译
Jul 03 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
js实现旋转木马轮播图效果
Jan 10 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
DOM精简教程
2006/10/03 Javascript
FireFox中textNode分片的问题
2007/04/10 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
js闭包学习心得总结
2018/04/17 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
js实现开关灯效果
2020/03/30 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
幼儿园家长评语
2014/02/10 职场文书
表彰会主持词
2014/03/26 职场文书
会计求职信范文
2014/05/24 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
团日活动总结格式
2015/05/11 职场文书
证婚人致辞精选
2015/07/28 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript