请用 JavaScript 手写实现一个防抖函数,并给出具体代码实现。
考察说明
考查对防抖概念的理解以及实际编码能力。
回答思路
- 【回答框架 1】防抖是一种限制函数执行频率的技术,核心思想是:在事件被连续触发时,只在最后一次触发后的延迟时间内没有再次触发,才执行目标函数。它常被用于输入框搜索、窗口大小调整等高频事件场景,以减少不必要的计算或请求。
- 【回答框架 2】典型实现是利用闭包保存计时器变量。每次调用防抖函数时,先清除上一次设置的 setTimeout,再设置一个新的 setTimeout,延迟执行目标函数。这样只有最后一次调用后的等待时间结束,目标函数才会真正运行。
- 【回答框架 3】考虑参数和 this 绑定,目标函数执行时需传入原调用参数,并确保 this 指向调用防抖函数的对象。常见实现使用 function 关键字以便获取 arguments 和 this,而非箭头函数。
- 【回答框架 4】可实现立即执行版本,即首次触发时立即执行,之后在等待期内触发的调用会被忽略,直到等待期结束再次触发时重新立即执行。这可通过记录是否已执行并配合计时器实现。
- 【回答框架 5】防抖与节流不同:防抖保证在连续触发后只执行一次,适合等待用户停止操作后执行;节流保证在固定时间内至少执行一次,适合需要持续响应的场景。选择依据是业务需求。
- 【关键点 1】防抖通过清除并重置定时器实现,确保只执行最后一次调用。
- 【关键点 2】使用闭包保存计时器和上下文,注意 this 与参数传递。
- 【关键点 3】支持立即执行版本需额外标记状态,并考虑返回值处理。
- 【易错点 1】如果使用箭头函数定义防抖函数,无法正确访问调用时的 this 和 arguments。
- 【易错点 2】未清除定时器可能导致内存泄漏,尤其在组件卸载时需要清理。
- 【易错点 3】立即执行版本需要额外处理第一次触发和重置计时联动,否则逻辑错误。