情景:当多次点击一个按钮,可能会因为网络延时问题或者被用户认为点击没有生效,在同一时间,进行多次误点之后,页面出现多次跳转或进行多次请求接口问题,此时我们可以应用防抖函数解决这一问题。
其原理:用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发点击 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环
具体步骤如下:
- 第一步: 将防抖函数在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() {
// 逻辑代码
}),