由来
- 如果短时间以很高频率触发
scroll 、resize、click 等事件（事件中涉及到大量的位置计算、DOM 操作等工作）时，会造成浏览器掉帧或者使得浏览器 CPU 使用率增加，影响浏览器性能，从而导致用户体验受到影响
防抖（debounce）
- 控制次数，函数在某段时间内只执行一次
-
生活场景
如果一个电梯5秒后门自动关闭，如果在5秒内的任意时刻按下开门按钮，电梯门将重新等5秒，以此往复，直到这5秒内没人按开门按钮，门才会自动关闭（代码执行）
-
应用场景
给按钮加函数防抖防止表单多次提交
对于输入框连续输入进行 AJAX 验证 时，用函数防抖能有效减少请求次数
判断 scroll 是否滑到底部，滚动事件 + 函数防抖
/**
* func 目标函数
* delay 延迟执行毫秒数
*/
function debounce(func, delay) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
};
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
};
function fun() {
console.log("执行了");
}
window.addEventListener('mousemove', debounce(fun, 1000));
截流（throttle）
- 控制频率，函数以固定的频率执行
-
生活场景
长途汽车站的汽车，每天固定时间（1小时）发车（代码执行），中间再怎么催也无济于事，只能等待下一班发车的时间点
-
应用场景
游戏中的刷新率
DOM元素 拖拽
Canvas 画笔功能
/**
* 第一种写法 定时器版
* func 目标函数
* delay 延迟执行毫秒数
*/
function throttle(func, delay) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) {
return;
};
timer = setTimeout(() => {
func.apply(context, args);
timer = null;
}, delay);
};
};
function fun() {
console.log("执行了");
}
window.addEventListener('mousemove', throttle(fun, 1000));
/** 第二种写法 间戳版
* func 目标函数
* delay 延迟执行毫秒数
*/
function throttle(func, delay) {
let previous = 0;
return function () {
let context = this;
let args = arguments;
let now = new Date();
if (now - previous > delay) {
func.apply(context, args);
previous = now;
}
};
}
function fun() {
console.log("执行");
}
window.addEventListener('mousemove', throttle(fun, 1000));
requestAnimationFrame
- rAF：16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度
