0、基础介绍
介绍:
- 防抖(
Debounce
)和节流(Throttle
)都是用来控制某个函数在一定时间内的触发次数.- 作用:
减少触发频率
,提高性能
或者说避免资源浪费
。区别:
- 防抖 (
多次触发 只执行最后一次
)- 节流 (
规定时间内 只触发一次
)
1、什么是防抖和节流?
防抖:
(1)防抖:防抖的含义是指在一定的时间内,多次触发同一个事件,只执行最后一次操作。比如:当我们搜索框中输入关键字或词时,输入框不断触发oninput事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并成一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。
节流:
(2)节流:节流的含义是指在一定时间内,多次触发同一个事件,只执行第一次操作。例如,当我们拖动网页上的滚动条时,会不断出发onscroll事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。
2、防抖和节流的代码:
防抖:
在防抖函数中,我们使用了闭包来保存定时器变量timer和传入的函数func。每次触发事件时,我们先清除之前的定时器,再设置一个新的定时器。如果在delay时间内再次触发事件,就会清除之前的定时器并设置一个顶的定时器,知道delay时间内不再触发事件,定时器到达时间后执行传入的函数func。
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用防抖优化搜索框输入
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
function search() {
console.log('searching...');
// 发送请求获取搜索结果
}
searchInput.addEventListener('input', debounce(search, 500));
searchBtn.addEventListener('click', search);
节流:
在节流函数中,我们同样使用了闭包来保存定时器变量timer和传入的函数func。每次触发事件时,如果定时器不存在,就设置一个定时器,并在delay时间后执行传入的函数func。如果在delay时间内再次触发事件,由于定时器还存在,就不会执行传入的函数func。只有在delay时间后定时器到达时间后执行传入的函数func并清除定时器。
在实际开发中,我们可以根据具体的情况选择使用防抖或节流来优化性能,以提高用户体验和应用性能。
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}
// 使用节流优化滚动事件
window.addEventListener('scroll', throttle(function() {
console.log('scrolling...');
// 计算滚动距离
}, 500));
3、防抖节流的第三方库
目前防抖节流的第三方库有 lodash 、underscore
4、应用场景:
防抖:登录、短信验证等按钮避免用户点击太快,发行多次请求;调整浏览器窗口大小时,resize 次数过于频繁,计算过多,造成页面卡顿的情况;文本编辑器实时保存;搜索框等。
节流: 鼠标连续不断地触发某事件(如点击事件),单位时间内只触发一次;监听滚动事件,例如:懒加载;每隔多少秒计算一次相关数据。