【JavaScript手撕代码】防抖节流

防抖节流设计到的知识点很多，有闭包有修改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 = !timerflag && callback.apply(this, args)timer = setTimeout(() => {timer = null}, delay)}}
}

简单版:

function debounce(callback, delay=300){let timer = nullreturn (...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)}}
}