应用函数防抖原理,处理当按钮在同一时间多次被点,会被执行多次问题

1,362 阅读1分钟

情景:当多次点击一个按钮,可能会因为网络延时问题或者被用户认为点击没有生效,在同一时间,进行多次误点之后,页面出现多次跳转或进行多次请求接口问题,此时我们可以应用防抖函数解决这一问题。

其原理:用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发点击 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环

具体步骤如下:

  • 第一步: 将防抖函数在until文件中进行全局封装
 export function throttle(fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
    }
    et _lastTime = null
    return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn.apply(this, arguments)  
    	    _lastTime = _nowTime
	}
    }
}
注意: fn.apply(this, arguments) 就是将this和参数传递给原函数,以防止后期使用this的时候,会受作用域影响而报underfind错误
  • 第二步: 在需要的页面,将方法引入
 import { throttle } from '../../common/utils.js'
  • 第三步: 在要触发的函数里应用
 goFacePick: throttle(function() {
    // 逻辑代码	
 }),