1.防抖函数

1.1认识防抖debounce函数

我们用一副图来理解一下它的过程：

  • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
  • 当事件密集触发时，函数的触发会被频繁的推迟；
  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

image.png
防抖的应用场景很多：

  • 输入框中频繁的输入内容，搜索或者提交信息；
  • 频繁的点击按钮，触发某个事件；
  • 监听浏览器滚动事件，完成某些特定操作；
  • 用户缩放浏览器的resize事件；

1.2 防抖函数的案例

我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：
比如想要搜索一个MacBook：

  • 当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
  • 当继续输入ma时，再次发送网络请求；
  • 那么macbook一共需要发送7次网络请求；
  • 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

但是我们需要这么多次的网络请求吗？

  • 不需要，正确的做法应该是在合适的情况下再发送网络请求；
  • 比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
  • 比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
  • 也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；
image.png

1.3 手写 debounce函数

debounce函数基本实现：

  1. function debounce(fn, delay) {
  2.     //1.定义一个定时器，保存上一次的定时器
  3.     let timer = null
  5.     //2.真正执行的函数
  6.     const _debounce = function() {
  7.         //取消上一次的定时器
  8.         if (timer) clearTimeout(timer)
  9.             //延迟执行
  10.         timer = setTimeout(() => {
  11.             //外部传入要执行的函数
  12.             fn()
  13.         }, delay)
  14.     }
  15.     return _debounce
  16. }

debounce函数 this参数：

  1. function debounce(fn, delay) {
  2.     //1.定义一个定时器，保存上一次的定时器
  3.     let timer = null
  5.     //2.真正执行的函数
  6.     const _debounce = function(...args) {
  7.         //取消上一次的定时器
  8.         if (timer) clearTimeout(timer)
  9.             //延迟执行
  10.         timer = setTimeout(() => {
  11.             //外部传入要执行的函数
  12.             fn.apply(this, args)
  13.         }, delay)
  14.     }
  15.     return _debounce
  16. }

debounce 函数添加立即执行功能：

  1. function debounce(fn, delay, immediate = false) {
  2.     //1.定义一个定时器，保存上一次的定时器
  3.     let timer = null
  4.     let isInvoke = false
  6.     //2.真正执行的函数
  7.     const _debounce = function(...args) {
  8.         //取消上一次的定时器
  9.         if (timer) clearTimeout(timer)
  11.         //判断是否需要立即执行
  12.         if (immediate && !isInvoke) {
  13.             fn.apply(this, args)
  14.             isInvoke = true
  15.         } else {
  16.             //延迟执行
  17.             timer = setTimeout(() => {
  18.                 //外部传入要执行的函数
  19.                 fn.apply(this, args)
  20.                 isInvoke = false
  21.             }, delay)
  22.         }
  24.     }
  25.     return _debounce
  26. }

debounce 函数添加取消功能：

  1. function debounce(fn, delay, immediate = false) {
  2.     //1.定义一个定时器，保存上一次的定时器
  3.     let timer = null
  4.     let isInvoke = false
  6.     //2.真正执行的函数
  7.     const _debounce = function(...args) {
  8.         //取消上一次的定时器
  9.         if (timer) clearTimeout(timer)
  11.         //判断是否需要立即执行
  12.         if (immediate && !isInvoke) {
  13.             fn.apply(this, args)
  14.             isInvoke = true
  15.         } else {
  16.             //延迟执行
  17.             timer = setTimeout(() => {
  18.                 //外部传入要执行的函数
  19.                 fn.apply(this, args)
  20.                 isInvoke = false
  21.                 timer = null
  22.             }, delay)
  23.         }
  24.     }
  26.     //封装取消功能
  27.     _debounce.cancel = function() {
  28.         if (timer) clearTimeout(timer)
  29.         timer = null
  30.         isInvoke = false
  31.     }
  34.     return _debounce
  35. }

debounce 函数 添加函数的返回值：

  1. function debounce(fn, delay, immediate = false, resultCallback) {
  2.     //1.定义一个定时器，保存上一次的定时器
  3.     let timer = null
  4.     let isInvoke = false
  6.     //2.真正执行的函数
  7.     const _debounce = function(...args) {
  8.         return new Promise((resolve, reject) => {
  9.             //取消上一次的定时器
  10.             if (timer) clearTimeout(timer)
  12.             //判断是否需要立即执行
  13.             if (immediate && !isInvoke) {
  14.                 const result = fn.apply(this, args)
  15.                 if (resultCallback) resultCallback(result)
  16.                 isInvoke = true
  17.             } else {
  18.                 //延迟执行
  19.                 timer = setTimeout(() => {
  20.                     //外部传入要执行的函数
  21.                     const result = fn.apply(this, args)
  22.                     if (resultCallback) resultCallback(result)
  23.                     isInvoke = false
  24.                     timer = null
  25.                 }, delay)
  26.             }
  27.         })
  28.     }
  30.     //封装取消功能
  31.     _debounce.cancel = function() {
  32.         if (timer) clearTimeout(timer)
  33.         timer = null
  34.         isInvoke = false
  35.     }
  38.     return _debounce
  39. }

2.节流函数

2.1 认识节流throttle函数

我们用一副图来理解一下节流的过程

  • 当事件触发时，会执行这个事件的响应函数；
  • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
  • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

image.png
节流的应用场景：

  • 监听页面的滚动事件；
  • 鼠标移动事件；
  • 用户频繁点击按钮操作；
  • 游戏中的一些设计；

2.2 节流函数的应用场景

很多人都玩过类似于飞机大战的游戏
在飞机大战的游戏中，我们按下空格会发射一个子弹：

  • 很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
  • 比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
  • 但是事件是触发了10次的，响应的函数只触发了一次；
  • image.png

2.3 手写 throttle函数

throttle 函数基本实现：

  1. function throttle(fn, interval) {
  2.     //1.记录上一次的开始时间
  3.     let lastTime = 0
  5.     //2.事件触发时，真正执行的函数
  6.     const _throttle = function() {
  8.         //2.1.获取当时事件触发时的时间
  9.         const nowTime = new Date().getTime()
  11.         //2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间，计算出还剩余多长时间去触发函数
  12.         const remainTime = interval - (nowTime - lastTime)
  13.         if (remainTime <= 0) {
  15.             //2.3.真正触发函数
  16.             fn()
  18.             //2.4.保留上次触发的时间
  19.             lastTime = nowTime
  20.         }
  21.     }
  23.     return _throttle
  24. }