--- theme: condensed-night-purple --- # 1. 防抖(debounce) * 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； * 当事件密集触发时，函数的触发会被频繁的推迟； * 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； ![debounce.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89a478d061ec4b64944559372a203310~tplv-k3u1fbpfcp-watermark.image#?w=613\&h=301\&s=54722\&e=png\&b=ffffff) ## 1.1 应用场景例如: `输入框中频繁的输入内容` `频繁的点击按钮，触发某个事件` `监听浏览器滚动事件，完成某些特定操作` `用户缩放浏览器的resize事件`等等 ## 1.2 简单实现第一个参数为函数 fn, 第二个参数延迟时间 delay ```js function debounce(fn, delay) { // 1.定义一个定时器, 保存上一次的定时器 let timer = null // 2.真正执行的函数 const _debounce = function() { // 取消上一次的定时器 if (timer) clearTimeout(timer) // 延迟执行 timer = setTimeout(() => { // 外部传入的真正要执行的函数 fn() }, delay) } return _debounce } ``` 至此, 已经实现了一个简单的防抖函数 ## 1.3 绑定this和参数args 当原始函数有参数和需要用到this时, 可以给`_debounc`添加args接收参数并在调用函数fn时使用 `fn.apply(this, args)` ```js function debounce(fn, delay) { let timer = null // 原始函数的参数args const _debounce = function(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // 绑定this fn.apply(this, args) }, delay) } return _debounce } ``` ## 1.4 第一次是否执行 > 首次触发时是否立即执行 > 接收一个参数 immediate, 定义一个默认值, 这里为false, 声明一个是否第一次激活的变量 isInvoke = false, 如果`immediate && !isInvoke`就执行函数并将 isInvoke = true, 如下代码 ```js function debounce(fn, delay, immediate = false) { // 1.定义一个定时器, 保存上一次的定时器 let timer = null let isInvoke = false // 是否激活了立即执行 // 2.真正执行的函数 const _debounce = function(...args) { // 取消上一次的定时器 if (timer) clearTimeout(timer) // 判断是否需要立即执行 if (immediate && !isInvoke) { fn.apply(this, args) isInvoke = true // 已经立即执行, 阻止下次触发的立即执行 } else { // 延迟执行 timer = setTimeout(() => { // 外部传入的真正要执行的函数 fn.apply(this, args) isInvoke = false // 将isInvoke初始化 }, delay) } } return _debounce } ``` ## 1.5 增加取消方法 > 如果触发了事件又不需要了, 比如直接离开此位置, 增加取消功能防止事件触发带来意外不当 ```js function debounce(fn, delay, immediate = false) { // 1.定义一个定时器, 保存上一次的定时器 ... // 2.真正执行的函数 const _debounce = function(...args) { ... } // 封装取消功能 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } return _debounce } ``` * 使用时便可以直接使用cancel方法 ```js function fn() { ... } const debounceAfterFn = debounce(fn, 1000) // 使用取消方法 debounceAfterFn.cancel() ``` ## 1.6 函数返回值 > 解决返回值问题, \_debounce返回一个Promise, 调用原始函数fn时拿到返回值`const result = fn.apply(this, args)`, 再调用 `resolve(result)` , 使用时通过`.then`获取**返回值** ```js // debounce.js function debounce(fn, delay, immediate = false) { // 1.定义一个定时器, 保存上一次的定时器 let timer = null let isInvoke = false // 2.真正执行的函数 const _debounce = function(...args) { return new Promise((resolve, reject) => { // 取消上一次的定时器 if (timer) clearTimeout(timer) // 判断是否需要立即执行 if (immediate && !isInvoke) { const result = fn.apply(this, args) resolve(result) isInvoke = true } else { // 延迟执行 timer = setTimeout(() => { // 外部传入的真正要执行的函数, 拿到函数返回值并调用resolve const result = fn.apply(this, args) resolve(result) isInvoke = false timer = null }, delay) } }) } // 封装取消功能 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } return _debounce } ``` ## 防抖的使用在html中引入写好的防抖函数的文件debounce.js ```html ``` # 2. 节流(throttle) * 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数； * 不管在这个中间有多少次触发这个事件，执行函数的频率总是固定的； ![throttle.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7444ce1474b34c8a9606571f5a427343~tplv-k3u1fbpfcp-watermark.image#?w=476\&h=269\&s=65422\&e=png\&b=fefdfd) ## 2.1 应用场景例如: `鼠标移动事件` `王者荣耀攻击键, 点击再快也是以一定攻速(频率)进行攻击`等等 ## 2.2 简单实现时间间隔: `interval`; 当前时间: `nowTime`; 上次执行时间: `lastTime` * 主要算出每次点击后剩余的时间 * 时间差 = 当前时间 - 上次执行时间 * 剩余时间 = 时间间隔 - 时间差 `const remainTime = interval - (nowTime - lastTime)` 判断当剩余时间 <= 0 时执行函数每次执行完之后将 lastTime = nowTime ```js function throttle(fn, interval, options) { // 1.记录上一次的开始时间 let lastTime = 0 // 2.事件触发时, 真正执行的函数 const _throttle = function() { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { // 2.3.真正触发函数 fn() // 2.4.保留上次触发的时间 lastTime = nowTime } } return _throttle } ``` ## 2.3 首次不触发leading和最后结束触发trailing ### 2.3.1 leading 初始值lastTime = 0, 所以第一次的`nowTime - lastTime`也会很大, `interval`减去很大的正数, 就会成为负数 < 0 **所以默认第一次是执行的** > 如果 interval 不是特别大, 第一次就是执行的, 除非你设置的 interval 大于当前时间. 也就是从计算机元年(1970)到如今, 五十多年的频率, 这个节流可不简单 :) 如果想要第一次不执行, 拿到remainTime之前将 `lastTime = nowTime` 即可 ```js function throttle(fn, interval, options = { leading: true, trailing: false }) { // 1.记录上一次的开始时间 const { leading, trailing } = options let lastTime = 0 // 2.事件触发时, 真正执行的函数 const _throttle = function() { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() if (!lastTime && !leading) lastTime = nowTime // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { // 2.3.真正触发函数 fn() // 2.4.保留上次触发的时间 lastTime = nowTime } } return _throttle } ``` ### 2.3.2 trailing 最后是否执行, 需要使用到定时器 setTimeout 1. 首先定义一个定时器 timer = null 2. 如果`remainTime <= 0` 判断 timer 不为空是就清除定时器并置空, 执行完函数后直接 return 3. 否则判断 trailing 为 true 且 timer 为 null 时, 设置一个定时器, 延迟时间就是剩余时间 remainTime 4. 通过 timer 执行函数后关于 lastTime 最后应该设置为什么, 取决于 leading 的值 * 当 leading 为 true 时, 相当于**2.2简单实现**, 将lastTime赋值当前时间, 这里重新获取当前时间 `lastTime = new Date().getTime()` * 当 leading 为 false 时, 直接将 lastTime 初始化为0, 相当于**2.3.1 leading**, 为0时下次执行将会进入`if (!lastTime && !leading) lastTime = nowTime` * 因此 `lastTime = !leading ? 0 : new Date().getTime()` ```js function throttle(fn, interval, options = { leading: true, trailing: false }) { // 1.记录上一次的开始时间 const { leading, trailing } = options let lastTime = 0 let timer = null // 2.事件触发时, 真正执行的函数 const _throttle = function() { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() if (!lastTime && !leading) lastTime = nowTime // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { if (timer) { clearTimeout(timer) timer = null } // 2.3.真正触发函数 fn() // 2.4.保留上次触发的时间 lastTime = nowTime return } if (trailing && !timer) { timer = setTimeout(() => { timer = null lastTime = !leading ? 0 : new Date().getTime() fn() }, remainTime) } } return _throttle } ``` ## 2.4 绑定原本函数的this和参数args && 增加取消方法和函数返回值 > 与防抖实现相同, 使用apply绑定this和传参数, 返回Promise来解决返回值问题最终代码如下: ```js function throttle(fn, interval, options = { leading: true, trailing: false }) { // 1.记录上一次的开始时间 const { leading, trailing, resultCallback } = options let lastTime = 0 let timer = null // 2.事件触发时, 真正执行的函数 const _throttle = function(...args) { return new Promise((resolve, reject) => { // 2.1.获取当前事件触发时的时间 const nowTime = new Date().getTime() if (!lastTime && !leading) lastTime = nowTime // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数 const remainTime = interval - (nowTime - lastTime) if (remainTime <= 0) { if (timer) { clearTimeout(timer) timer = null } // 2.3.真正触发函数 const result = fn.apply(this, args) resolve(result) // 2.4.保留上次触发的时间 lastTime = nowTime return } if (trailing && !timer) { timer = setTimeout(() => { timer = null lastTime = !leading ? 0: new Date().getTime() const result = fn.apply(this, args) resolve(result) }, remainTime) } }) } _throttle.cancel = function() { if(timer) clearTimeout(timer) timer = null lastTime = 0 } return _throttle } ``` *也可使使用回调函数callback来处理返回值* ## 节流的使用 ```html ``` # 结语学习自`coderwhy(王红元)`老师, 感谢老师