节流和防抖是前端开发中常用的两种优化性能的技术。
节流是指在一段时间内只执行一次函数，即使在这段时间内多次触发函数也不会执行，常用的场景如滚动、拖拽等事件，可以减少事件的频繁触发，提升页面性能。
防抖是指在一定时间内，多次触发函数，只有最后一次触发时才会执行函数，常用的场景如搜索框、输入框等事件，可以避免频繁的请求或操作，减少不必要的资源浪费。
在实现上，节流可以通过设置定时器来实现，而防抖可以通过清除之前的定时器来实现。两者的目的都是为了减少不必要的函数执行，提高性能，但应根据具体场景选择哪种方式。
接下来看代码，我相信如此详细注释你应该看的懂，我个人建议最好跟着敲一篇才能更好理解
// 手写防抖函数
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);
