更新时间:2023-03-13 来源:黑马程序员 浏览量:
防抖和节流是前端开发中常用的两种性能优化技术。
防抖 (Debouncing) 的含义是指在一定时间内,多次触发同一个事件,只执行最后一次操作。例如,当我们在搜索框中输入关键词时,输入框会不断触发 oninput 事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并为一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。
节流 (Throttling) 的含义是指在一定时间内,多次触发同一个事件,只执行第一次操作。例如,当我们拖动网页上的滚动条时,会不断触发 onscroll 事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。
下面是 JavaScript 中实现防抖和节流的代码演示:
在防抖函数中,我们使用了闭包来保存定时器变量 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);
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));
在节流函数中,我们同样使用了闭包来保存定时器变量 timer 和传入的函数 func。每次触发事件时,如果定时器不存在,就设置一个定时器,并在 delay 时间后执行传入的函数 func。如果在 delay 时间内再次触发事件,由于定时器还存在,就不会执行传入的函数 func。只有在 delay 时间后定时器到达时间后执行传入的函数 func 并清除定时器。
在实际开发中,我们可以根据具体情况选择使用防抖或节流来优化性能,以提高用户体验和应用性能。
猜你喜欢: