七爪源码：Debounce很棒

原标题：七爪源码：Debounce 很棒

我们到了吗（怪物史莱克 2）

如果你看过电影（史莱克 2），你可能对驴子问我们到了吗？而惹恼史莱克的部分很熟悉。 多次。 嗯..，有时你的函数可能和驴子一样烦人，但幸运的是，我们有一个解决方案。

问题

想象一下，在 API 请求之后，您有一个包含 500k 用户对象的数组。

现在您要实现搜索功能，该功能可以按姓名、电话、电子邮件和其他一些参数在数组中搜索用户。 您将拥有一些在整个数组上运行的繁重函数，并返回新的过滤数组以及过滤后的用户以显示在屏幕上。

结果，我们的性能很差，因为用户按下的任何按键都会触发繁重的功能并减慢浏览器的速度。 （搜索 Johhny 会导致我们运行该函数 10 次）

解决方案 - 去抖动

Debounce 是一个函数，它接受另一个函数作为参数，将该函数包装在一个闭包中，并返回新函数以实现稍等行为，因此该函数将在一段时间后触发，并且可以取消或更新 .

功能分解

useDebounce 函数接受 2 个参数。

func：一个泛型函数，接受任何类型的参数并可以返回任何类型的类型waitFor：等待执行函数（func）的毫秒数

setTimeout 函数是一个在后台运行并等待给定时间直到执行的内置函数，它返回一个数字，因此我们可以使用 clearTimeout 函数在执行前终止该任务。 然后我们返回新包装的去抖动函数。 所以基本上我们在这里做的是调用 debounce 函数，每次调用，我们都会停止之前的超时并创建一个新的超时。

现在我们可以在我们的项目中使用 useDebounce 函数了：

概括

Debounce 是提高项目性能的好方法，尤其是在涉及后端的情况下。 现在有了这些知识，您可以在任何地方轻松实现去抖动功能！

希望你喜欢这篇文章。 敬请关注返回搜狐，查看更多

责任编辑：

健康食品 产品推荐 洗护测评 知识科普