java接口防抖_花式解说防抖函数debounce的实现

歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成 3-4 篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！

歪老师：“马同学，防抖和节流你知道吗？起来说一下。”

马同学：“老师，我不知道呀，都没听说过。”

歪老师：“好吧，那今天我们就先来讲讲防抖吧。先从基本的概念以及使用场景说起”。

一、概念

防抖 debounce 和节流 throttle 的概念并不是 JS 所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。

防抖是为了避免用户无意间执行函数多次。比如有些用户喜欢在点击的时候使用 double click 双击，或者就是手抖连续点了两下，这就可能会导致一些意想不到的问题。

通过防抖可以在事件触发一定时间后没有再次触发同一事件时，再去执行相关的处理函数。

就好比你去菜市场买菜，到某个小摊上开始挑菜，接连挑好一袋又一袋放在摊主面前，摊主并不会每一袋都给你结账，而是会等着问你：“还要别的吗？”，等你确认完不要了，才会结账。

你可以通过歪马写的这个 demo 查看常规无限制函数调用和防抖(节流)之后的可视化对比，完整 demo 地址如下： codesandbox.io/s/yibubupia…。

二、作用&应用场景

在具体实现之前，我们先简单了解一下防抖和节流的作用以及在哪些业务中会用到。

防抖和节流(这里先包含它吧)主要能够给我们带来以下好处：

优化用户体验：适时反馈，避免 UI 渲染阻塞，浏览器卡顿

提升页面性能：避免页面渲染卡顿，减少服务器压力，防范恶意触发

防抖的应用场景有以下几个方面：

输入框内容联想 --> 适时反馈、减少服务器压力

window.resize --> 避免 UI 渲染阻塞，浏览器卡顿

提交表单 --> 减少服务器压力，防范恶意触发

歪老师：“概念我们就介绍到这，下面我们来看看该如何实现。”

三、如何实现防抖

歪老师：“防抖可以通过计时器来实现，通过setTimeout来指定一定时间后执行处理函数，如果在这之前事件再次触发，则清空计时器，重新计时。”

function debounce(fn, wait){

let timerId = nu