JavaScript预防频繁点击误操作(防抖处理)

前端通过点击触发向服务端发起数据请求的地方特别需要注意添加防双击/频繁点击操作的预防处理,双击/频繁点击的误操作可能导致数据重复或者异常,影响用户体验

所属分类 WEB

相关标签 点击误操作攻击

误操作场景描述

对于双击/频繁点击的场景有时候并非恶意的攻击行为。

如网络延迟导致用户下意识多点击一次、又比如鼠标硬件异常出现单击变双击的情况。

当功能按钮被频繁点击将意味着多次向服务端发起数据请求。

在异步数据传输广泛的今天,很容易出现数据重复,数据库唯一校验失败,展示异常的情况。

举个简单易懂的例子:

比如在购物车中选中某个商品进行删除,如果无意间触发了频繁点击,界面可能提示商品不存在。

实际上是因为第一次触发删除服务端已经删除了此商品,第二次则会提示商品不存在。

这样的场景用户体验较差,此外如果一些关键性的功能没有增加频繁操作的预防措施,极有可能出现冗余的重复数据。

通过JS预防频繁点击误操作有很多种方式,主要分为两种,一种是只允许操作一次和限制时间或返回数据后放开操作限制。

只许一次

如果界面中的某个按钮仅允许操作一次的实现逻辑非常简单。

在需要限制的方法外,页面中定义一个变量cFlag(点击开关),默认为true。

首次点击进入后,直接关闭开关,然后执行后续的操作。

//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
    if(cFlag) {
        //首次点击进入方法直接关闭开关
        cFlag = false;
        //执行后续ajax提交逻辑
        //略
    }else{
        //如果希望增加一些友情提示可以增加else分支
        alert('请勿频繁提交');
    }
}

限定时间或返回数据后放开限制

如果界面的按钮可以点击多次,但是想限制重复点击的时间。

我们可以在代码中增加一个恢复开关的语句

实例代码如下:

//默认点击开关打开
var cFlag = true;
//提交方法
function submitForm() {
    if(cFlag) {
        //首次点击进入方法直接关闭开关
        cFlag = false;
        //执行后续提交ajax逻辑
        //返回数据后放开限制的场景,可以再ajax的返回方法中添加cFlag = true;
        //代码执行完后增加定时恢复开关
        //5秒钟恢复点击开关
        setTimeout(function (){cFlag = true;}, 5000);
    }else{
        //如果希望增加一些友情提示可以增加else分支 
        alert('重复提交需要等待5秒');
    } 
}

限制时间优化提示

如某功能按钮需要间隔30秒提交一次,时间过去15秒后,用户点击了给予提示还需要等待15秒。

该能力不建议完全通过JS实现(可以通过服务端来计算时间直接返回提示)。

并不是JS不能够实现,如果用户在10秒的时候刷新一下页面,计时就会被重置,这个限制就相当于存在漏洞。

但对于流程性强的页面实际还是可以使用的,因为这类页面一旦刷新就需要用户从头操作。

//提交按钮触发
$('#submit').click(function() {
    var nowTime = new Date().getTime();
    //给这个按钮增加一个点击事件的属性
    var clickTime = $(this).attr('clickTime');
    //存在点击时间说明被点击过,判断当前时间和单击时间 
    if( clickTime != "undefined" && (nowTime - clickTime < 30000)) {
        var waitTime = 30000 - nowTime + clickTime;
        waitTime = Math.parseInt(waitTime/1000);
        alert('您需要在'+waitTime+'秒后方可提交');
        return false;
    }else{
        //刷新最新的点击时间
        $(this).attr('clickTime', nowTime);
        //执行后续提交逻辑
        //略
    }
});

结尾小结

预防频繁点击可以减少数据库产生冗余数据的风险。

由于频繁点击产生的报错可能会覆盖首次点击的正常返回信息,会给用户造成很大的困扰。

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核