js防抖和节流实现
防抖（Debounce）的实现
防抖的核心思想是在事件触发后等待一段时间再执行回调，若在等待期间再次触发事件，则重新计时。适用于输入框搜索联想、窗口大小调整等场景。
基础实现：
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}立即执行版本：
function debounce(func, delay, immediate) {
let timeoutId;
return function(...args) {
const context = this;
const later = () => {
timeoutId = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(later, delay);
if (callNow) func.apply(context, args);
};
}节流（Throttle）的实现
节流的核心思想是在固定时间间隔内只执行一次回调。适用于滚动事件、高频点击等场景。
时间戳版本：
function throttle(func, limit) {
let lastTime;
return function(...args) {
const now = Date.now();
if (!lastTime || now - lastTime >= limit) {
func.apply(this, args);
lastTime = now;
}
};
}定时器版本：
function throttle(func, limit) {
let timeoutId;
return function(...args) {
if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null;
}, limit);
}
};
}结合版本（更精确控制）：
function throttle(func, limit) {
let lastTime = 0;
let timeoutId;
return function(...args) {
const now = Date.now();
const remaining = limit - (now - lastTime);
if (remaining <= 0) {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
func.apply(this, args);
lastTime = now;
} else if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null;
lastTime = Date.now();
}, remaining);
}
};
}使用示例
防抖示例：
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function() {
console.log('Searching:', this.value);
}, 500);
searchInput.addEventListener('input', debouncedSearch);节流示例：
window.addEventListener('scroll', throttle(function() {
console.log('Scrolling:', window.scrollY);
}, 200));关键区别
防抖在连续触发时只执行最后一次，节流在固定时间间隔内必定执行一次。根据实际场景需求选择合适的方法。高频事件中需要即时反馈用节流，只需最终结果用防抖。
