【业务场景】用户连点

处理用户连点

1.时间戳处理

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

代码如下:

js 复制代码
// 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

如何使用?

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

js 复制代码
import clickThrottle from '@/utils/clickThrottle.js'
...

...
handleEvent() {
    // 首先进行时间戳判断,若不符合条件则直接退出处理
    if(!clickThrottle(5000)) return
    // 后续进行事件的处理
    ...
}

2.节流

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

参考:防抖与节流

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

3.按钮加载状态

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

其实现方法是:

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

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

相关推荐
xiao-xiang12 分钟前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins
C语言魔术师28 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
小周不摆烂34 分钟前
探索JavaScript前端开发:开启交互之门的神奇钥匙(二)
javascript
匹马夕阳2 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?2 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
我想学LINUX3 小时前
【2024年华为OD机试】 (A卷,100分)- 微服务的集成测试(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·微服务·集成测试
screct_demo3 小时前
詳細講一下在RN(ReactNative)中,6個比較常用的組件以及詳細的用法
javascript·react native·react.js
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb9 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu