JavaScript函数防抖和函数节流

什么是函数防抖和函数节流

函数防抖和函数节流是一种处理高频率触发事件时，优化js代码，降低回调函数的执行频率，提高前端性能的手段。

函数防抖（debounce）

函数防抖指的是当一个事件被触发n秒后再执行回调函数，若该事件在n秒内再次被触发，则重新计时。

场景：在搜索框内输入关键字，当停止完成一段时间之后才会自动加载搜索结果。

debounce函数代码实现

let timer;
function debounce(callback, delay = 2000) {
	//	若timer已存在则取消定时器
	timer && clearTimeout(timer);
	timer = setTimeout(callback, delay);
}

函数节流（throttle）

函数节流指的是当一个事件在n秒内被多次触发时，只执行一次。

常见应用场景：滚动条移动至接近底部时让页面加载更多资源。由于滚动一次页面可能会触发几十次scroll事件，性能损耗严重，所以每隔一段时间计算一次滚动位置更加合适。

throttle函数代码实现

let timer;
function throttle(callback, delay = 2000) {
    //	如果该事件在n秒内被再次触发，直接return
    if (timer) return;
    timer = setTimeout(function () {
        callback();
        clearTimeout(timer);
    }, delay)
}

参考资料

1. 详解防抖函数（debounce）和节流函数（throttle）
2. 彻底弄懂函数防抖和函数节流
3. 实例解析防抖动（Debouncing）和节流阀（Throttling）