Document

--- theme: condensed-night-purple highlight: a11y-dark --- # 防抖与节流 ## 前言 **防抖**和**节流**作为很多大厂的经典面试题，问倒了许多小伙伴，其实它们的原理和实现都没有那么难，这篇文章带你轻松搞定! ## 正文 ### 一、定义 > 防抖：在`触发一次函数后`的`规定时间内`没有`再次`触发才`执行` > 节流：`连续触发`事件，在`规定时间内`只执行`一次` 来个经典的比喻，帮助你更好理解：我们把电梯完成**一次运送**，类比为一次函数的**执行和响应**。假设电梯有两种运行策略** debounce **和** throttle **，超时设定为15秒，不考虑容量限制。 **防抖**：电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送。 **节流**：电梯第一个人进来后，15秒后准时运送一次。 ### 二、实现 #### 1. 防抖的实现 **实现**：实现前端一个按钮，当你`频繁点击`时，并`不会`发送请求，只有当你在规定时间内`没有再点击`时，才会执行函数。如果停止点击但是在规定时间内`再点击`，会重新`触发计时`。 **思路**：在一段连续操作结束后，处理回调，利用`clearTimeout`和`setTimeout`实现。前端代码： ```html Document ``` js代码： (这里涉及到了闭包及this的原理) ```js function throttle(func, wait) { let preTime = 0 //上一次的时间 return function () { let args = [...arguments] //获取事件参数 let now = +new Date() //时间戳精准到秒 if (now - preTime > wait) { //点击第二次的时候判断时间有没有到 func.apply(this, args) preTime = now } } } ``` ### 三、应用场景防抖： * 搜索框搜索输入。只需用户最后一次输入完，再发送请求节流： * 滚动加载，加载更多或滚到底部监听 ## 总结个人理解，防抖就是“一直抖”(频繁触发事件)，直到停下来了才执行最后那一次触发；节流就是按照规定时间间隔来，这个规定时间内只执行一次。