函数防抖
函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
举个栗子:
- 搜索框输入完实时请求搜索
- 用户名、手机号、邮箱等输入验证
- 浏览器窗口大小改变后,窗口调整完后,再执行 resize 事件中的代码,防止重复渲染
function debounce(fn, wait) {
let timer = null;
return function () {
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
}
}
函数节流
指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思,会稀释函数的执行频率。
举个栗子:
- 页面滚动判断
// func要执行的函数 wait执行间隔的时间 immediate是否立即执行
function throttle(fn, interval = 300) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, interval);
};
}