【业务场景】用户连点

处理用户连点

1.时间戳处理

思路：通过检查当前时间和上一次触发事件的时间之间的间隔，判断是否允许继续执行。

代码如下：

// clickThrottle.js
/* 防止重复点击 */
let clickTimer = 0

function clickThrottle(interval = 3000) {
    let now = new Date().getTime(); // 获取当前时间的时间戳
    let timer = clickTimer; // 记录触发事件的事件戳
	
    if (now - timer < interval) {
    	// 如果当前时间 - 触发事件时的事件 < interVal，那么不符合条件，直接return false，
    	// 不让当前事件继续执行下去
        return false;
    } else { 
    	// 反之，记录符合条件触发了事件的时间戳，并 return true，使事件继续往下执行
        clickTimer = now;
        return true;
    }
}

export default clickThrottle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如何使用？

首先引入上述js文件，如何将其应用到触发事件的响应函数中即可：

import clickThrottle from '@/utils/clickThrottle.js'
...

...
handleEvent() {
    // 首先进行时间戳判断，若不符合条件则直接退出处理
    if(!clickThrottle(5000)) return
    // 后续进行事件的处理
    ...
}
1
2
3
4
5
6
7
8
9
10

2.节流

注意处理用户连点时，并不能单纯使用基础的节流函数，因为这样会导致用户的操作存在延迟，影响用户的使用体验，最好的方法是使用立即执行的节流函数。

参考：防抖与节流

使用节流函数处理用户连点存在一定的问题：由于点击后需要请求后端接口提交信息，而当用户网络较差时，网络请求的响应时间较长，当该时间超过了节流所控制的时间长度时，节流就失效了！这一问题实际上也是较难解决的，因为每一个用户的网络情况是不同的，并不好统一一个节流的时间长度。

3.按钮加载状态

为按钮添加加载状态，实际上是在所有能够实现该需求的方法中，用户体验最好的方法。

其实现方法是：

1. 点击按钮时，待通过表单校验后，将按钮置为加载状态，禁止用户点击；
2. 请求后端接口提交数据，并等待接口响应；
3. 在网络请求Promise的then方法中，进行提交成功的处理，在catch方法中，进行提交失败的处理。
4. 最后，在Promise的finally方法中，重置按钮状态为正常状态，可进行点击；

这样最终的效果是，当用户点击按钮后，按钮呈现加载状态，无法继续点击，等待后端处理完毕后，无论此次提交成功还是失败，按钮都可以再次点击（当然一般提交成功后会跳转离开）。