防抖(debounce)
1、定义
就是在连续的操作中,无论进行了多长时间,只有某一次的操作后,在指定的时间内没有再操作,这一次才被判定为有效。(事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。)
2、应用场景
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。
3、简单代码示例
// 1. 利用计时器,实现防抖。
// 2. 通过 setTimeout 的方式,在一定的时间间隔内,将多次触发变成一次触发。
function debounce(fn, delay) {
let timer;
return function () {
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(()=> {
fn.apply(this, args);
}, delay);
};
}
节流(throttle)
1、定义
在频繁的操作中,在规定时间内,只触发一次。比如我们设定500ms,在这个时间内,无论点击按钮多少次,它都只会触发一次
2、应用场景
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能
-
抢购的时候,无数人快速的点击按钮,如果每次点击都发送请求,就会给服务器造成巨大的压力,但是我们进行节流后,就会大大减少请求的次数
-
防止表单提交按钮被多次触发,我们应该选择使用节流而不是防抖
-
滚动加载,加载更多或滚到底部监听
3、简单代码示例
function throttle(fn, delay) {
let timer;
return function () {
let _this = this;
let args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
// 在delay后执行完fn之后清空timer,此时timer为假,throttle触发可以进入计时器
timer = null;
}, delay)
}
}
目的:降低回调执行频率,节省计算资源