实现防重复操作（JS与CSS）_js控制按钮重复提交

实现防重复操作（JS与CSS）

一、前言

日常开发中我们经常会对按钮进行一个防重复点击的校验，这个通常使用节流函数来实现。在规定时间内只允许提交一次，可以有效的避免事件过于频繁的执行和重复提交操作，以及为服务器考虑 。

举例假设有一个提交按钮submit，现在要对于这个按钮来进行防重复校验；

<button type="submit" id="subBth">提交<button/>
1

下面介绍集中防重复点击的方案：

二、JS实现防重复点击

节流思想：就是在一定时间内不管触发多少次，只要过了单位时间只会执行一次。结合场景来说就是用户点了一次提交之后，5s内重复点提交按钮都不会重新发起请求。

2.1 手写节流函数

实现思路：

1. 点击事件触发后设置一个倒计定时器；
2. 在定时器还没结束之前再次点击不进入事件；
3. 定时器结束之后可以再次点击；

const throttle = (fn, delay) => {
    let timer = null;
    return function() {
        if(!timeout){
          timeout = setTimeout(()=>{
            timeout = null;
            fn.apply(this, arguments);
          },delay)
        }
    };
}

// 提交事件
function submit() {};
const btn = document.querySelector('#subBth');
btn.addEventListener('click', throttle(submit, 500));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.2 使用lodash工具库

// 安装  npm i --save lodash
// 使用
import { throttle } from 'lodash';
// 提交事件
function submit() {};
const btn = document.querySelector('#subBth');
btn.addEventListener('click', throttle(submit, 500));
1
2
3
4
5
6
7

三、使用CSS实现防重复点击

从CSS层面需要做哪些事情：

1. 需要控制button按钮的点击限制；
2. 需要有时间控制禁用时效；
3. 规定时间结束后可以再次点击；

为此需要介绍两个CSS属性

3.1 pointer-events指针属性

官方文档解释为：指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target（事件触发对象）。

简单来说就是：可以控制元素是否可以被事件冒泡或捕获到，主要是适用于SVG内容的，但这里我们可以用它来控制按钮是否可以被点击。

属性值有很多，这里就不一一介绍感兴趣的可以去官方文档查看

我们需要了解的属性值是none与all：

1. none：元素永远不会成为鼠标事件的触发对象；
2. all：只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标

3.2 animation动画属性

官方解释：animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state属性的一个简写属性形式。用来指定一组或多组动画，每组之间用逗号相隔。

简单来说：animation 就是一个动画的组合属性的简写，可以让我们不需要写那么多的css动画属性。

在这里也不详细介绍具体用法，感兴趣可以去官方文档学习。

3.3 具体实现

实现思路：

1. 设置500ms的动画时间
2. 动画开始时禁用鼠标事件
3. 动画结束后取消禁用
4. 设置active清空animation动画，方便点击是再次触发动画
5. 设置提交事件直接使用就行

/* 小知识点：在active触发时设置animation为none，会重新触发动画 */
#subBth:active{
  animation: none;
}
#subBth{
	width: 200px;
	height: 60px;
	font-size: 30px;
	background: #00ffff ;
	/* animation: 动画名称绑定keyframes 动画时长 速度曲线 动画不播放状态  */
	/* step-end: 上一个状态直接切换下一个状态 */
	/* forwards: 当动画播放完成后，保持动画最后一个关键帧中的样式 */
  animation: throttle 500ms step-end forwards;
}
/* 定义动画规则 */
@keyframes throttle {
	/* 动画开始时样式 */
  from {
		background: #eee;
    	pointer-events: none;
  }
	/* 动画结束时样式 */
  to {
		background: #00ffff;
    	pointer-events: all;
  }
}

const btn = document.querySelector('#subBth');
btn.addEventListener('click', submit);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30