写一个ts防抖

写一个ts防抖
用户986184975
2025年03月04日
|
浏览 108

好的,以下是一个使用 TypeScript 实现的防抖函数示例:

复制代码
function debounce(func: (...args: any[]) => void, wait: number): (...args: any[]) => void {
    let timeout: NodeJS.Timeout | null = null;

    return function(...args: any[]) {
        if (timeout) clearTimeout(timeout);

        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// 使用示例
const handleInput = debounce((value: string) => {
    console.log('Debounced Input:', value);
}, 300);

// 绑定事件
document.getElementById('input')?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    handleInput(target.value);
});

关键技术说明:

  1. 防抖函数:通过设置一个定时器,在指定时间间隔内如果再次触发事件则重新计时。
  2. 闭包:利用闭包保存 timeout 变量,确保每次调用时都能清除之前的定时器。
  3. 事件绑定:将输入框的事件与防抖函数绑定,实现输入防抖效果。

如需继续排查,请点击下方【🔍追问按钮】提交补充信息

我要提问
复制内容
分享给好友
AI编程问答网 免责声明:
以上内容除特别注明外均来源于网友提问,AI编程问答网回答,权益归原著者所有;
 
上一篇:写一个ts防抖
下一篇:写一个ts防抖