在工作中,时常会有这种情况:
利用防抖与节流可解决此类问题
防抖:在任务频发的情况下,在任务触发的间隔超过设定的间隔的时候,任务才会执行,即被调用的函数在一次连续的高频操作中只被调用一次。
意思就是:这件事需要等待,如果反复催促,就重新计时
上面频繁调用接口的情况,我们在代码中使用防抖功能,就可以在用户输入完成或点击操作的结束后,才去调用接口,整个过程只是最后执行的一次接口调用
封装一个防抖函数
let debounceTimer = null // 防抖方法-定时器对象
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
function debounce (func, wait, immediate = false) {
let context = this // 获取debounce执行作用域的this
let args = arguments // 获取参数
if (debounceTimer) clearTimeout(debounceTimer)
if (immediate) {
const callNow = !debounceTimer
debounceTimer = setTimeout(() => {
debounceTimer = null
}, wait)
if (callNow) func.apply(context, args)
} else {
debounceTimer = setTimeout(function() {
debounceTimer = null
func.apply(context, args)
}, wait)
}
}
节流:和防抖一样也是优化高频调用函数的一种方法,通俗来讲节流就是指定时间间隔内只会执行一次任务。
意思就是:去摇号,一天摇号的次数只能一次,下次隔天再来
上面需要监听计算滚动条的情况,使用节流可以按一定的时间频率去获取,用户提交查询接口数据,可以使用节流,在接口预计返回的时间内只允许执行一次接口调用,减少高频调用
封装一个节流函数
let throttlePreious = 0 // 节流记录的时间戳
let throttleTimer = null // 节流定时器对象
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版(立即执行) 2 表定时器版(延迟执行)
*/
function throttle (func, wait, type = 1) {
let context = this // 获取debounce执行作用域的this
let args = arguments // 获取参数
if (type === 1) {
let now = Date.now()
// 当前时间 - 记录的时间 > 设定的时间间隔
if (now - throttlePreious > wait) {
func.apply(context, args)
throttlePreious = now
}
} else if (type === 2) {
if (!throttleTimer) {
throttleTimer = setTimeout(() => {
throttleTimer = null
func.apply(context, args)
}, wait)
}
}
}
方法重用,这里使用apply,是因和call不同,call()
方法是分别接收参数apply()
方法接受数组形式的参数。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。