📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
📢 Krpano专栏：想学VUE的，冲这里
🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！
目录
✨ 前言
防抖(debounce)
节流(throttle)
✨ 结语
✨ 前言
在前端开发中,我们经常需要绑定处理函数到一些频繁触发的事件上,如scroll、resize、input等。如果事件处理函数执行频率过高,会对页面性能产生很大影响。
防抖(debounce)
防抖的原理是:触发事件后,延迟一段时间执行处理函数,如果在延迟时间内再次触发事件,会重新开始延时。
防抖可以使用的场景:
- 输入框实时搜索Suggest
- 窗口resize时调整样式
示例代码:
function debounce(func, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func();
}, delay);
}
}
// 输入框搜索uggest
const search = debounce(() => {
// 获取输入值后请求suggest
}, 500);
input.addEventListener('input', search);
防抖的一般实现步骤:
1、创建一个延迟调用方法,使用闭包保存需要执行的函数
function debounce(func, delay) {
let timeout;
return function() {
// 保存函数执行上下文和参数,传递给延迟函数
}
}2、每次事件触发时,都清除之前的延时调用
function debounce(func, delay) {
let timeout;
return function() {
clearTimeout(timeout);
// 省略
}
}3、设置一个新的延时调用
function debounce(func, delay) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
func();
}, delay);
}
}4、考虑附加参数并返回函数调用结果
function debounce(func, delay) {
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
return func(...args);
}, delay);
}
}返回一个可以取消延时的函数
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func(...args);
}, delay);
return () => clearTimeout(timeout);
}
}这样就实现了一个功能较完整的防抖函数,在不断调用时只执行最后一次,并可以通过返回的函数取消延迟。
节流(throttle)
节流的原理是:触发事件一段时间内只执行一次处理函数。
节流可使用的场景:
- 滚动加载更多内容
- 限制按钮提交频率
示例代码:
function throttle(func, delay) {
let prev = 0;
return function() {
let now = Date.now();
if (now - prev > delay) {
func();
prev = now;
}
}
}
// 滚动加载更多
window.addEventListener('scroll', throttle(() => {
//请求加载更多数据
}, 500));来关于节流函数,我也给出一些更完整和详细的实现思路:
1、创建一个可以保存执行时间和方法的闭包
function throttle(func, delay) {
let lastTime;
return function() {
// 保留函数执行上下文和参数
}
}2、每次事件触发,比较当前时间和上次时间
function throttle(func, delay) {
let lastTime = Date.now();
return function() {
let now = Date.now();
if (now - lastTime > delay) {
// 函数处理逻辑
}
}
}3、在时间差大于阈值时,执行函数并更新最后时间
function throttle(func, delay) {
let lastTime = Date.now();
return function() {
let now = Date.now();
if (now - lastTime > delay) {
func();
lastTime = now;
}
}
}4、考虑附加参数并返回函数执行结果
function throttle(func, delay) {
return function(...args) {
// 时间比较逻辑
return func(...args);
}
}5、返回取消延时的方法
function throttle(func, delay) {
let timeout;
// 实现逻辑
return () => clearTimeout(timeout);
}这样就实现了一个具有基本功能的节流函数,它可以帮助我们限制函数执行频率,避免过快调用。
✨ 结语
防抖和节流都是优化高频率执行事件的技巧。区别在于:
- 防抖是将多次执行变为最后一次执行
- 节流是将多次执行变成每隔一段时间执行
根据需要选用合适的方式,可以有效避免页面过渡渲染,提升性能。
