前端js防止用户恶意操作,重复点击按钮事件

JavaScript020

前端js防止用户恶意操作,重复点击按钮事件,第1张

前几天遇到了一个关于前端重复点击事件问题,防止用户恶意操作,重复点击按钮事件,有二个逻辑解决此问题:

1.

2.定义变量保存每次点击的时间,上次和当前次点击的时间间隔小于某个时间,就return掉,否则就继续之后步骤,类似于

this.state={clickTime:new Date().getTime()}

  buyCard(){ 

   var {clickTime} =this.state

    var nowTime = new Date().getTime()

     if( clickTime != 'undefined'&& (nowTime - clickTime <500)){

               return false

     }else{

        this.setSate({clickTime:nowTime})

        .....

     }       

}

在进行窗口的resize、scroll,输入框内容校验,防止按钮重复点击等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,体验糟糕。所以可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。

我们一起先来看看防抖和节流的区别

防抖函数 debounce

节流函数 throttle

如何调用

防抖和节流都利用了闭包,首先就调用了debounce和debounce方法,把内部的方法返回出去,下次自己执行,以后有时间我再写一下闭包吧,所以我还留下一个问题,这样会不会造成内存泄漏?

Htmljs禁止整个页面所有点击可以添加标记,第一次点击后变为false,每次点击判断这个标记是true才执行。

如果是按钮防止重复点击,可以再按钮点击后,给按钮添加disabled属性。

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。