JavaScript如何预防频繁点击误操作触发重复请求

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

JavaScript如何预防频繁点击误操作触发重复请求

所属分类: WEB
专题标签: Ajax 点击 频繁

误操作场景描述

对于双击/频繁点击的场景有时候并非恶意的攻击行为。
有时候如网络延迟导致用户下意识多点击一次、又比如鼠标硬件异常出现单击变双击的情况。
当功能按钮被频繁点击将意味着多次向服务端发起数据请求。
在异步数据传输广泛的今天,很容易出现数据重复,数据库唯一校验失败,展示异常的情况。
举个简单易懂的例子:
比如在购物车中选中某个商品进行删除,如果无意间触发了频繁点击,界面可能提示商品不存在。
实际上是因为第一次触发删除服务端已经删除了此商品,第二次则会提示商品不存在。
这样的场景用户体验较差,此外如果一些关键性的功能没有增加频繁操作的预防措施,极有可能出现冗余的重复数据。
通过JS预防频繁点击误操作有很多种方式,主要分为两种,一种是只允许操作一次和限制时间或返回数据后放开操作限制。

只许一次

如果界面中的某个按钮仅允许操作一次的实现逻辑非常简单。
在需要限制的方法外,页面中定义一个变量cFlag(点击开关),默认为true。
首次点击进入后,直接关闭开关,然后执行后续的操作。

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

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

如果界面的按钮可以点击多次,但是想限制重复点击的时间。
我们可以在代码中增加一个恢复开关的语句
实例代码如下:

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

限制时间优化提示

如某功能按钮需要间隔30秒提交一次,时间过去15秒后,用户点击了给予提示还需要等待15秒。
该能力不建议完全通过JS实现(可以通过服务端来计算时间直接返回提示)。
并不是JS不能够实现,如果用户在10秒的时候刷新一下页面,计时就会被重置,这个限制就相当于存在漏洞。
但对于流程性强的页面实际还是可以使用的,因为这类页面一旦刷新就需要用户从头操作。

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

结尾小结

预防频繁点击可以减少数据库产生冗余数据的风险。
由于频繁点击产生的报错可能会覆盖首次点击的正常返回信息,会给用户造成很大的困扰。

相关文章