你不容错过的JavaScript高级语法(防抖,节流)

简介: 你不容错过的JavaScript高级语法(防抖,节流)

下面一篇文章将介绍防抖,节流函数。


认识防抖和节流函数


防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中。而JavaScript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗,我们就可以通过防抖和节流来限制事件频繁的发生。


防抖debounce


认识防抖函数


他就像我们电脑的屏保一样。你在一定时间移动鼠标,他就不会出现。


  • 当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间。


  • 当事件密集触发时,函数的触发会被频繁的推迟。


  • 只有等待了一段时间也没有事件触发,才会真正的执行响应函数。


防抖的应用场景


  • 输入框中频繁的输入内容,搜索或者提交信息。


  • 频繁的点击按钮,触发某个事件。


  • 监听浏览器滚动事件,完成某些特定操作。


  • 用户缩放浏览器的resize事件。


节流throttle


认识节流函数


  • 当事件触发时,会执行这个事件的响应函数。


  • 如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数。


  • 不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的。


节流的应用场景


  • 监听页面的滚动事件。


  • 鼠标移动事件。


  • 用户频繁点击按钮操作。


  • 游戏中的一些设计。


使用Underscore库来帮助实现


事实上我们可以通过一些第三方库来实现防抖操作:


  • lodash


  • underscore


我们可以理解成lodash是underscore的升级版,它更重量级,功能也更多。但是目前我看到underscore还在维护,lodash已经很久没有更新了。


Underscore的官网: underscorejs.org/


下面来看一下简单的案例:


  • 没有使用防抖节流函数


<input type="text">
      <script>
        const inputEl=document.querySelector("input");
        inputEl.oninput=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
      </script>


网络异常,图片无法展示
|


  • 使用防抖函数。


<input type="text">
      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
      <script>
        const inputEl=document.querySelector("input");
        const inputFn=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
        inputEl.oninput=_.debounce(inputFn,1000);
      </script>


网络异常,图片无法展示
|


  • 使用节流函数。


<input type="text">
      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
      <script>
        const inputEl=document.querySelector("input");
        const inputFn=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
        inputEl.oninput=_.throttle(inputFn, 1000);
      </script>


网络异常,图片无法展示
|


通过上面的案列,我们可以很清楚的看出防抖节流的作用和区别。


自定义防抖和节流函数


防抖函数


  • 基本实现


  • 该函数只能实现该功能,不能使用事件对象和this。(this指向错误)


function debounce(fn, delay) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null
      // 2.真正执行的函数
      const _debounce = function() {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          fn()
        }, delay)
      }
      return _debounce
    }


  • 解决事件对象和this指向问题


  • 但是事件第一次被触发不会被执行


function debounce(fn, delay) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null
      // 2.真正执行的函数
      const _debounce = function(...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          fn.apply(this, args)
        }, delay)
      }
      return _debounce
    }


其实实现的这里,已经可以了。


  • 解决该函数第一次不能触发问题


  • 就是让用户传入一个boolean来控制第一次执行。并且还需要在内部定义一个isInvoke来判断是否为停顿后的执行。等到每次触发函数后,将isInvoke改为false。表示停顿后依旧是第一次执行。


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
          }, delay)
        }
      }
      return _debounce
    }


  • 添加取消函数。


  • 当我们触发事件时,然后想要取消该事件的执行。


  • 其实就是直接调用clearTimeout。并对一些参数做初始化。


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
            timer = null
          }, delay)
        }
      }
      // 封装取消功能
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }
      return _debounce
    }


  • 拿到函数执行的返回值。其实像这种函数的封装,想要拿到函数返回值,都可以使用回调函数。


  • 方式一: 传递回调函数。


function debounce(fn, delay, immediate = false, resultCallback) {
      // 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)
            if (resultCallback) resultCallback(result)
            resolve(result)
            isInvoke = true
          } else {
            // 延迟执行
            timer = setTimeout(() => {
              // 外部传入的真正要执行的函数
              const result = fn.apply(this, args)
              if (resultCallback) resultCallback(result)
              resolve(result)
              isInvoke = false
              timer = null
            }, delay)
          }
        })
      }
      // 封装取消功能
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }
      return _debounce
    }


  • 方式二: 将_debounce放在Promise执行,当有结果后,放在resolve返回。调用then方法。


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(() => {
              // 外部传入的真正要执行的函数
              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
    }


  • 这种方式,需要通过then方法拿到参数,由于该函数是js内部执行。所以需要外层包装一个函数再调用。


const tempCallback = () => {
      _debounce().then(res => {
        console.log("Promise的返回值结果:", res)
      })
    }


节流函数


  • 基本实现


  • 这里第一次会执行。因为nowTime刚触发时是很大的。


function throttle(fn, interval, options) {
      // 记录上一次的开始时间
      let lastTime = 0
      // 事件触发时, 真正执行的函数
      const _throttle = function() {
        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        if ((nowTime - lastTime) >= interval) {
          // 真正触发函数
          fn()
          // 保留上次触发的时间
          lastTime = nowTime
        }
      }
      return _throttle
    }


  • 解决事件对象和this指向问题


function throttle(fn, interval, options) {
          // 记录上一次的开始时间
          let lastTime = 0
          // 事件触发时, 真正执行的函数
          const _throttle = function(...args) {
            // 获取当前事件触发时的时间
            const nowTime = new Date().getTime()
            // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
            if ((nowTime - lastTime) >= interval) {
              // 真正触发函数
              fn.apply(this, args)
              // 保留上次触发的时间
              lastTime = nowTime
            }
          }
          return _throttle
        }


其实实现的这里,已经可以了。


  • 外界决定是否第一次和最后一次触发


  • 默认情况下,如果最后一次触发事件事件间隔还没有到触发频率,它将不会再次触发。如果有需求,我们可以设置一个定时器让其触发。


function throttle(fn, interval, options = { leading: true, trailing: false }) {
      // 记录上一次的开始时间
      const { leading, trailing } = options
      let lastTime = 0
      let timer = null
      // 事件触发时, 真正执行的函数
      const _throttle = function(...args) {
        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        if (!lastTime && !leading) lastTime = nowTime
        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
          if (timer) {
            clearTimeout(timer)
            timer = null
          }
          // 真正触发函数
          fn.apply(this, args)
          // 保留上次触发的时间
          lastTime = nowTime
          return
        }
        if (trailing && !timer) {
          timer = setTimeout(() => {
            timer = null
            lastTime = !leading ? 0: new Date().getTime()
            fn.apply(this, args)
          }, remainTime)
        }
      }
      return _throttle
    }


  • 添加取消函数。


function throttle(fn, interval, options = { leading: true, trailing: false }) {
      // 记录上一次的开始时间
      const { leading, trailing } = options
      let lastTime = 0
      let timer = null
      // 事件触发时, 真正执行的函数
      const _throttle = function(...args) {
        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        if (!lastTime && !leading) lastTime = nowTime
        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
          if (timer) {
            clearTimeout(timer)
            timer = null
          }
          // 真正触发函数
          fn.apply(this, args)
          // 保留上次触发的时间
          lastTime = nowTime
          return
        }
        if (trailing && !timer) {
          timer = setTimeout(() => {
            timer = null
            lastTime = !leading ? 0: new Date().getTime()
            fn.apply(this, args)
          }, remainTime)
        }
      }
      _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        lastTime = 0
      }
      return _throttle
    }


  • 拿到执行函数的返回值。


  • 他也是有两种方式。和debounce是现实一样的。


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)
            if (resultCallback) resultCallback(result)
            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)
              if (resultCallback) resultCallback(result)
              resolve(result)
            }, remainTime)
          }
        })
      }
      _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        lastTime = 0
      }
      return _throttle
    }


二者的完整实现有些难度。实现大致功能就行。即会实现到处理this和函数传参即可。


相关文章
|
4天前
|
JavaScript 前端开发 Java
【JavaScript】基础语法(中)
【JavaScript】基础语法
15 1
|
2天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
2天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
2天前
|
JavaScript 前端开发
JavaScript高级四、高阶技巧
JavaScript高级四、高阶技巧
|
4天前
|
JavaScript 前端开发 Java
【JavaScript】基础语法(下)
【JavaScript】基础语法
9 1
|
4天前
|
Web App开发 JavaScript 前端开发
【JavaScript】基础语法(上)
【JavaScript】基础语法
9 0
|
4天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
14 0
|
4天前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
11 1
|
4天前
|
JavaScript 前端开发 UED
js的节流
js的节流
14 0
|
4天前
|
JavaScript
JS 基本语法
JS 基本语法
14 1