防抖（Debounce）：
防抖用于确保一个函数在指定工夫内只触发一次。它在短时间内多次触发同一个事件时，会勾销之前的触发，直到最后一次触发后的必定时间间隔内没有新的触发才执行函数。
常见的利用场景蕴含：
输入框实时搜查：当用户在输入框中输入时，可能利用防抖技术提前执行搜查查问，放大不必要的查问和服务器压力。
窗口大小调整：当用户调整浏览器窗口大小时，可能利用防抖技术避免在调整过程中频繁地从新计算布局。
表单验证：当用户在表单输入时，可能利用防抖技术在用户进行输入一段时间后再执行验证，放大验证的次数。
/** * @description 防抖函数 * @param {Function} fn * @param {number} delay * @param {boolean} immediate * @returns {Function} */export function debounce<T extends (...args: any[]) => any>( fn: T, delay: number, immediate: boolean = false): T & { cancel(): void } { let timerId: ReturnType<typeof setTimeout> | null = null; // 存储定时器 // 定义一个cancel方法,用于勾销防抖 const cancel = (): void => { if (timerId) { clearTimeout(timerId); timerId = null; } }; const debounced = function ( this: ThisParameterType<T>, ...args: Parameters<T> ): void { const context = this; if (timerId) { cancel(); } if (immediate) { // 如果 immediate 为 true 并且没有正在期待执行的定时器，立即执行指标函数 if (!timerId) { fn.apply(context, args); } // 设置定时器，在延迟时间后将 timeoutId 设为 null timerId = setTimeout(() => { timerId = null; }, delay); } else { // 设置定时器，在延迟时间后执行指标函数 timerId = setTimeout(() => { fn.apply(context, args); }, delay); } }; // 将 cancel 方法附加到 debounced 函数上 (debounced as any).cancel = cancel; return debounced as T & { cancel(): void };}节流（Throttle）：
节流用于确保一个函数在必定时间内最多只触发一次。它会在触发事件期间以固定的时间间隔执行函数，而不管事件触发得多频繁。常见的利用场景蕴含：
滚动事件监听：例如监听页面滚动到底部加载更多数据时，可能利用节流技术放大查看滚动位置的频率，提高性能。
鼠标移动事件：例如实现一个拖拽性能，可能利用节流技术放大鼠标移动事件的解决频率。
动画成绩：当实现一个基于时间的动画成绩时，可能利用节流技术限度动画帧率，升高计算开销。
总之，防抖和节流技术都可能在不同场景下提高利用性能。防抖实用于多次触发只需执行一次的情况，而节流实用于限度间断触发事件的执行频率。
/** * 节流函数 * @param func 要进行节流的指标函数 * @param delay 节流的时间间隔（毫秒） * @returns 返回一个通过节流解决的函数 */export function throttle<T extends (...args: any[]) => any>( fn: T, delay: number): T { let lastCall: number | null = null; // 上一次调用的时间戳 return function ( this: ThisParameterType<T>, ...args: Parameters<T> ): ReturnType<T> | void { const now = Date.now(); //当前时间戳 // 如果之前没有调用过,或者时间间隔超过了设定的值,执行指标函数 if (!lastCall || now - lastCall >= delay) { lastCall = now; return fn.apply(this, args); } } as T;}