react中使用 debounce 和 throbble hooks（debounced and throttled hooks）进行封装

一、防抖和节流概述

防抖（debounce）与节流（throttle）是前端开发中常用的工具函数。

当执行窗口的resize、scroll操作，或者对输入框内容进行校验时，若事件处理函数被频繁调用而无任何限制，将显著增加浏览器的负载，从而严重影响用户的使用体验。为缓解这一问题，可以借助debounce（防抖）和throttle（节流）机制来控制调用频率，在保证功能正常运行的同时有效降低资源消耗。

在实际开发中，我们常常依赖lodash库所提供的相关工具函数。然而，在某些情况下，是否能够自行封装实现防抖与节流的hooks呢？

首先需要明确这两个概念的具体含义：

• 防抖：通过设置一个计时器，在设定的时间间隔后执行目标函数。但如果在该时间间隔内再次触发事件，则会清除之前的计时器并重新开始计时。这种机制确保只有最后一次触发才会被执行。
• 节流：同样依赖于一个计时器，在指定的时间段后执行函数。如果在该时间段内再次触发事件，则检查是否存在尚未完成的延迟调用任务。若存在则不再重复设置计时器；若不存在，则安排新的延迟调用。

防抖机制的核心在于：在规定的时间间隔之后才执行某个事件。如果在此期间内多次触发该事件，则每次都会重置计时器，最终只有最后一次触发会被真正执行。

常见的应用场景包括用户登录、点击按钮提交表单、点赞、收藏以及关注等操作。

1、函数