节流和防抖是前端开发中常用的两种优化性能的技术。
节流是指在一段时间内只执行一次函数,即使在这段时间内多次触发函数也不会执行,常用的场景如滚动、拖拽等事件,可以减少事件的频繁触发,提升页面性能。
防抖是指在一定时间内,多次触发函数,只有最后一次触发时才会执行函数,常用的场景如搜索框、输入框等事件,可以避免频繁的请求或操作,减少不必要的资源浪费。
在实现上,节流可以通过设置定时器来实现,而防抖可以通过清除之前的定时器来实现。两者的目的都是为了减少不必要的函数执行,提高性能,但应根据具体场景选择哪种方式。
接下来看代码,我相信如此详细注释你应该看的懂,我个人建议最好跟着敲一篇才能更好理解
// 手写防抖函数
function debounce(func, delay) {
let timer; // 定义定时器变量
return function () {// 返回一个函数
const context = this; // 保存函数执行时的上下文
const args = arguments; // 保存函数执行时的参数
clearTimeout(timer); // 清除之前的定时器
timer = setTimeout(() => {
func.apply(context, args); // 按照指定的时间间隔执行函数
}, delay);
}
}
// 使用示例
function handleInput() {
console.log('输入框输入了');
}
// 创建一个防抖函数
const debouncedHandleInput = debounce(handleInput, 500);
// 给输入框添加防抖事件
document.querySelector('input').addEventListener('input', debouncedHandleInput);
// 手写节流函数
function throttle(func, delay) {
let lastTime = 0; // 记录上一次执行函数的时间
return function () { // 返回一个函数
const context = this; // 保存函数执行时的上下文
const args = arguments; // 保存函数执行时的参数
const nowTime = Date.now(); // 记录当前时间
if (nowTime - lastTime >= delay) { // 如果当前时间与上一次执行函数的时间间隔超过指定时间间隔
func.apply(context, args); // 执行函数
lastTime = nowTime; // 更新上一次执行函数的时间
}
}
}
// 使用示例
function handleScroll() { console.log('页面滚动了'); }
// 创建一个节流函数
const throttledHandleScroll = throttle(handleScroll, 500);
// 给页面添加节流事件
document.addEventListener('scroll', throttledHandleScroll);