防抖节流设计到的知识点很多,有闭包有修改this指向,应当作为重点记忆
防抖节流
防抖
防抖是指,短时间频繁触发fn,只执行最后一次,这样可以有效提高性能,减少服务器压力
也可以这样表述:函数在 n 秒后再执行,如果 n 秒内被触发,重新计时,保证最后一次触发事件 n 秒后才执行。
/*
* @param {Function} callback 回调函数
* @param {Number} delay 回调函数在delay ms 后执行
* @param {Boolean} immediate 是否立即执行回调
**/
function debounce(callback, delay=300, immediate=false){
let time = null
// 返回一个闭包
return (...args) => {
// 存在定时器则清空, 重新计时
if(timer){
clearInterval(timer)
timer=null
}
// 若不立即执行
if(!immediate){
timer = setTimeout(() => {
callback.apply(this, args)
}, delay)
}else{
// 立即执行
// timer 为空则代表此时不在delay中, 可以立即执行
let flag = !timer
flag && callback.apply(this, args)
timer = setTimeout(() => {
timer = null
}, delay)
}
}
}
简单版:
function debounce(callback, delay=300){
let timer = null
return (...args) => {
if(timer){
clearInterval(timer)
timer = null
}
timer = setInterval(() => {
callback.apply(this, args)
}, delay)
}
}
节流
函数在一段时间内只会执行一次,如果多次触发,那么忽略执行
/*
* @param {Function} callback 执行函数
* @param {Number} delay
*/
function throttle(callback, delay){
// 上一次执行时的时间
let start = Date.now()
return function(){
// 这一次触发时的时间
const now = Date.now()
// 如果相邻两次触发时间超过设置的delay, 说明已经过了限制时间,可以执行函数
if(now - start >= delay){
// 更新start, 方便下次对比
start = now
// 执行函数
return callback.apply(this, arguments)
}
}
}