防抖是防止抖动,即在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
防抖常用场景
搜索框输入查询,只需用户最后一次输入完,再发送请求
按钮提交,防止多次提交按钮请求
窗口大小Resize,只需窗口调整完成后,计算窗口大小。防止重复渲染。
图片懒加载,只需滚动到可视范围内,再发送请求加载图片。
监听滚动事件,只需判断用户停止滚动多久,再发送请求加载更多内容。
防抖函数
function debounce(fn, delay) {
let timer = null;
return function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
节流是控制事件发生的频率,即规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间再次触发,则会重新计算时间。
节流常用场景
鼠标不断点击触发,mousedown(单位时间内只触发一次)
监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
监听文本框输入值,用throttle来判断
监听滚动事件,用throttle来判断
监听鼠标移动,用throttle来判断
节流函数
function throttle(fn, delay) {
let canRun = true;
return function() {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, delay);
};
}
防抖和节流的区别
防抖是将多次执行变为最后一次执行。
节流是将多次执行变成每隔一段时间执行。