监听click事件,

默认三秒钟内的点击事件触发第一次的点击事件,也可以通过throttleTime自定义时间 只触发第一次


/**
* <div (throttleClick)="goExceptionReport()" [throttleTime]="5000">throttleClick 5 S</div>
* <div (throttleClick)="goExceptionReport()">throttleClick default</div>
* <div tappable (throttleClick)="goExceptionReport()">throttleClick default with tappable</div>
*/
import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from "@angular/core";
import { Subject } from "rxjs/Subject";
import { Subscription } from "rxjs/Subscription"; @Directive( {
selector: "[throttleClick]",
} )
export class ThrottleClickDirective implements OnInit, OnDestroy {
@Input() public throttleTime = 3000;
@Output() public throttleClick = new EventEmitter();
private clicks = new Subject<any>();
private subscription: Subscription; constructor() {} ngOnInit() {
// 拦截点击事件只传递第一次点击事件的处理操作交给parent来处理
this.subscription = this.clicks
.throttleTime( this.throttleTime )
.subscribe(( e ) => this.throttleClick.emit( e ) );
} ngOnDestroy() {
// 取消订阅
this.subscription.unsubscribe();
} // HostListener这个装饰器可以监听directive作用的dom元素的click事件,第二个参数$event告诉Angular传递点击事件到directive中去;
@HostListener( "click", [ "$event" ] )
clickEvent( event: MouseEvent ) {
// 防止事件继续向parent component中传递
event.preventDefault();
event.stopPropagation();
// 这里使用subject的.next来传递点击事件,然后使用rxjs的函数操作符throttleTime来处理延时事件,在指定事件内只处理第一次操作,调用emit传递点击事件的操作到parent中去继续处理;
this.clicks.next( event );
}
}

默认三秒钟内的点击事件触发最后一次的点击事件,也可以通过debounceTime自定义时间 只触发最后一次


import { Directive, EventEmitter, HostListener, OnInit, Output, Input } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { debounceTime } from 'rxjs/operators';
import {Subscription} from 'rxjs/Subscription'; @Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
@Input() debounceTime = 500;
@Output() debounceClick = new EventEmitter();
private clicks = new Subject();
private subscription: Subscription; constructor() { } ngOnInit() {
// 拦截点击事件然后延迟这些点击事件的执行,直到一段时间内最后一次点击,最后把事件的处理操作交给parent来处理
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);
}
}

angular4 防二次重复点击的更多相关文章

  1. vue防重复点击(指令实现)

    快速点击按钮会重复多次调用接口,防止出现这样的情况 全局定义,方便调用 新建plugins.js export default { install (Vue) { // 防重复点击(指令实现) Vue ...

  2. springboot实现防重复提交和防重复点击

    背景 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击 目标 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击 说明 这里的重复点击是指在指定的时间段内多次点击 ...

  3. 关于javascript中限定时间内防止按钮重复点击的思路

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...

  4. iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部

    一.实现功能:重复点击tabBar,刷新当前TableView,其余不受影响 <1>实现思路: 错误的方法: TabBar成为自己的代理,监听自己的点击--这种方法是不可取的,如果外面设置 ...

  5. 重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部

    1.监听按钮点击   2.判断是否是点击的同一个按钮(记录上次点击的按钮)   3.当重复点击相同按钮时,需要获取当前按钮对应控制器刷新界面      3.1 判断是否重复点击按钮,代码写在哪里?   ...

  6. 谈谈防止Ajax重复点击提交

    首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...

  7. UIButton防止被重复点击

    一.避免屏幕内多个 UIButton 被重复点击 1.在 AppDelegate 中添加[[UIButton appearance] setExclusiveTouch:YES]; 2.button. ...

  8. API接口设计:防参数篡改+防二次请求

    API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数 为了防止被第别有用心之人获取到真实请求参数后再次发起请求获取信息,需要采取很多安全机制 1.首先: 需要采用ht ...

  9. iOS防止button重复点击

    项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...

随机推荐

  1. 微信小程序-view组件

    <view class="section"> <view class="section__title">flex-direction: ...

  2. C# 后台添加Log信息

    我们在做项目的时候,经常会使用到Log日志,今天分享一下如何在后台添加Log信息 创建一个写Log的方法: public void WriteLog(string Action) { try { st ...

  3. 浅谈搜索引擎SEO(HTML/CSS)

    SEO:搜索引擎优化(免费): SEM:搜索引擎营销(付费). 它们两者的区别是: 1.SEM高投入,SEO低投入: 2.SEM短.效益块,SEO长期投入.增长慢: 3.新广告法颁布之后SEM广告位减 ...

  4. vue2.0中的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...

  5. 2.bootstrap安装

    1.下载 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本(或者 http://www.bootcss.com/  中文网) Download Boo ...

  6. [翻译] HTKDragAndDropCollectionViewLayout

    HTKDragAndDropCollectionViewLayout Custom UICollectionViewLayout that works together with a custom U ...

  7. python面向对象编程(2)—— 实例属性,类属性,类方法,静态方法

    1  实例属性和类属性 类和实例都是名字空间,类是类属性的名字空间,实例则是实例属性的名字空间. 类属性可通过类或实例来访问.只有通过类名访问时,才能修改类属性的值. 例外的一种情况是,当类属性是一个 ...

  8. 3 Dockerfile指令详解-FROM&MAINTAINER&RUN

    1.FROM指令 FROM centos #指定centos为基础镜像 2.MAINTAINER 指令 MAINTAINER @QQ.COM #指定维护人等信息,方便维护 3.RUN  命令  #新建 ...

  9. C++类知识总结

    c++类 1.初始化const或引用类型数据成员的唯一机会是在构造函数初始化列表中. 2.使用成员初始化列表时成员初始化的次序:第一个成员首先被初始化.然后是第二个,依次类推. 构造函数初始化列表为类 ...

  10. Vmstat主要关注哪些数据?

    除特殊情况外,一般关注飘红部分 任务的信息(procs) r(running) 在internal时间段里,运行队列中的进程数,即表示正在运行或者正在等待CPU时间的进程数,如果这个参数值超过服务器上 ...