防抖函数(ts版本)
防抖
在处理事件监听(如按钮点击、窗口大小改变、滚动等)时非常有用,作用:限制函数执行的频率,确保函数在事件停止触发一定时间后才执行一次,从而提高应用程序的性能和用户体验。
以下的实例是1秒
调用一次这个方法debounce()
function debounce<T extends (...args: any[]) => any>(
func: T,
wait: number
): (...args: Parameters<T>) => void {
let timeout: any = null; // 使用 NodeJS.Timeout 类型(如果你在 Node.js 环境中)---这里使用any会更方便
return function(this: any, ...args: Parameters<T>) {
clearTimeout(timeout!); // 使用非空断言操作符(!)因为我们已经初始化了 timeout
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
// 使用示例
const debouncedLog = debounce((message: string) => {
console.log(message); // 这里可以放异步请求
}, 1000);
节流函数(ts版本)
防抖
处理高频触发的事件时,具有显著的好处。作用:限制某个函数在一定时间间隔内的执行次数,确保函数不会因为事件的频繁触发而过于密集地执行。控制资源消耗,避免因为过度执行而导致的性能问题。
以下的实例是1秒
调用一次这个方法throttle()
// 节流处理
function throttle<T extends (...args: any[]) => any>(
func: T,
delay: number,
): (...args: Parameters<T>) => void {
let canRun = true
return function (this: any, ...args: Parameters<T>): void {
if (canRun) {
func.apply(this, args)
canRun = false
setTimeout(() => {
canRun = true
}, delay)
}
}
}
// 使用示例
const throttleLog = throttle((message: string) => {
console.log(message); // 这里可以放异步请求
}, 1000);