防抖节流是什么
本质上是优化高频率执行代码的一种手段
如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce) 和 节流(throttle) 的方式来减少调用频率
防抖
定义:
防抖主要是在规定时间内只触发一次,如果再次调用,时间重新计算
实现:
let timeout = null;
function debounce(fn, delay, args) {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
fn(args);
}, delay);
}
节流
定义:
节流是在间隔时间内只触发一次,比如间隔1s触发一次
实现:
let flag = null;
function throttle(fn, time, args) {
if (flag) return;
flag = setTimeout(() => {
fn(args);
flag = null;
}, time);
}