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

JavaScript014

前端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方法，把内部的方法返回出去，下次自己执行，以后有时间我再写一下闭包吧，所以我还留下一个问题，这样会不会造成内存泄漏？