Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

Posted 2023-04-12 桃小瑞

各位朋友你们好呀。今天是立春，明天就是正月十五元宵节了，这种立春 + 元宵相隔的时候，可是很难遇到的，百年中就只有几次。在这提前祝大家元宵快乐。

今天给大家带来的是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章，文章中不仅会讲述原来使用的防抖或节流方式，还会带来新的一种封装方式，使用起来更简单、更清晰。

前言

在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。

加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

防抖或节流原理

防抖（debounce）

如果用户多次频繁操作以最后一次为准，当然也可以以第一次为准，进行数据更新或者网络资源请求，以消除冗余的操作，或者减少一定的请求资源浪费。

示例代码

function debounce (fn, delay = 300)
    let timer = null
    return function (...args) 
        clearTimeout(timer)
        timer = setTimeout(()=>
            fn.call(this, ...args)
        , delay);
    

使用

debounce(()=> count += 1, 1000)

节流（throttle ）

在一定时间范围内，用户触发多次只会执行一次以达到防止用户频繁操作的目的。

示例代码

let timer = null
function throttle (fn, delay = 300) 
    if(timer == null)
        timer = setTimeout(() => 
            fn()

            clearTimeout(timer)
            timer = null
        , delay);
    

使用

throttle(()=> count += 1, 1000)

环境说明

• vue 3
• vite

新封装

这里我分两个模块来讲述。一个是防抖；另一个是节流。

虽然这两个差别不是很大，但还是有区别的。上车，兄弟们。🚗🚗🚗

防抖（debounce）

先看常见封装内容。

常见封装-1

代码

function debounce (fn, delay = 300)
    let timer = null
    return function (...args) 
        if(timer != null)
            clearTimeout(timer)
            timer = null
        
        timer = setTimeout(()=>
            fn.call(this, ...args)
        , delay);
    

使用

const addCount = debounce(()=> count.value += 1, 1000)

常见封装-2

代码

let timer = null
function debounce (fn, delay = 1000)
    if(timer != null)
        clearTimeout(timer)
        timer = null
    
    timer = setTimeout(fn, delay)

使用

const addCount = () => debounce(()=> count.value += 1, 1000)

新封装

这里我们需要借助 vue 3 中的 customRef 来实现我们的新方式。这里我就不具体写了。我直接在每行代码上面添加注释。我相信朋友你是能看懂的。🌹🌹🌹

代码

// 从 vue 中引入 customRef 和 ref
import  customRef, ref  from "vue"

// data 为创建时的数据
// delay 为防抖时间
function debounceRef (data, delay = 300)
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 防抖方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => 
            return 
                get () 
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                ,
                set (value) 
                    // 清除定时器
                    if(timer != null)
                        clearTimeout(timer)
                        timer = null
                    
                    // 创建定时器
                    timer = setTimeout(() => 
                        // 修改数据
                        data = value;
                        // 派发更新
                        trigger()
                    , delay)
                
            
        )

使用

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => 
  count.value += 1


// v-model 中使用
<input type="text" v-model="count">

节流（throttle）

我们还是一样，先看常见封装内容。

常见封装-1

代码

let timer = null
function throttle (fn, delay = 300) 
    if(timer == null)
        timer = setTimeout(() => 
            fn()

            clearTimeout(timer)
            timer = null
        , delay);
    

使用

const addCount = () => throttle(()=> count.value += 1, 1000)

常见封装-2

代码

function throttle (fn, delay = 300) 
    let timer = null
    return function (...args) 
        if(timer == null)
            timer = setTimeout(() => 
                fn.call(this, ...args)
    
                clearTimeout(timer)
                timer = null
            , delay);
        
    

使用

const addCount = throttle(()=> count.value += 1, 1000)

新封装

节流和防抖在封装和使用上大同小异的。

代码

// data 为创建时的数据
// delay 为节流时间
function throttleRef (data, delay = 300)
    // 创建定时器
    let timer = null;
    // 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
    return delay == null 
        ? 
        // 返回 ref 创建的
        ref(data)
        : 
        // customRef 中会返回两个函数参数。一个是：track 在获取数据时收集依赖的；一个是：trigger 在修改数据时进行通知派发更新的。
        customRef((track, trigger) => 
            return 
                get () 
                    // 收集依赖
                    track()
                    // 返回当前数据的值
                    return data
                ,
                set (value) 
                    // 判断
                    if(timer == null)
                        // 创建定时器
                        timer = setTimeout(() => 
                            // 修改数据
                            data = value;
                            // 派发更新
                            trigger()
                            // 清除定时器
                            clearTimeout(timer)
                            timer = null
                        , delay)
                    
                
            
        )

使用

// 创建
const count = debounceRef(0, 300)

// 函数中使用
const addCount = () => 
  count.value += 1


// v-model 中使用
<input type="text" v-model="count">

总结

以上便是Vue 3 中的极致防抖/节流（含常见方式防抖/节流）这篇文章的全部内容，如有不足或朋友你有更好的方式或者其他独到的见解，欢迎评论 + 私信。

当然朋友你又学到了一招可以点赞 + 关注 + 评论哦。

希望本篇文章对正在阅读的朋友你有所帮助。

想了解vue 2中如何实现相同方案的朋友可以点击这里 👉 Vue 2 中的实现 CustomRef 方式防抖/节流

我是桃小瑞，公众号 @ 桃小瑞。

120.节流和防抖，Vue中如何添加节流和防抖

一、什么是防抖、什么是节流

试想以下场景：

• 1、疯狂滑动网页，如果要求在每一瞬间滑动的时候，都触发某个函数？
• 2、和一个人争论，对方在喋喋不休地开炮，这个时候，你是等对方讲完再来讲道理，还是等她安静下来呢？

很多时候，我们不需要实时地去反馈。这对机器的性能要求太高了，并且不太必要，所以有了以下的解决方案：

• 1、防抖：假定一个停顿时间，如果下一个操作和上一个操作的间隔不够一个停顿时间，我们就取消操作的想法。

  等喋喋不休的人彻底（并不是永远，而是泛指一段规定的时间内）安静下来，我们再阐述道理。

• 2、节流：假定一个间隔时间，在持续操作的时候，按照间隔的时间触发。

  有间隔地回复喋喋不休的人。

二、防抖示例(从原来上看，防抖就是要把之前的事件清空掉，所以是比节流简单很多的)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  html, body, ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wrap ul {
    width: 800px;
    height: 500px;
    background-color: #eee;
    overflow-y: scroll;
  }
  .wrap ul li {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    background-color: #089e8a;
  }
  .wrap ul li:last-child {
    margin-bottom: 0;
  }
</style>
</head>
<body>
  <div class="wrap">
    <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</body>
<script>
  window.onload = function () {
    // 获取滚动父元素
    const oUl = document.getElementById(‘ul‘)
    // 编写防抖函数
    const fn = function (delay) {
      let timeout = null
      return function() {
        if (timeout) {
          window.clearTimeout(timeout)
        }

        timeout = setTimeout(() => {
          console.log(‘执行 scroll 的回调‘)
          arguments.callee(delay)
        }, 1000)
      }
    }
    oUl.addEventListener(‘scroll‘, fn(1000))
  }
</script>
</html>

接下来我们可以尝试着优化我们的 JS 部分，让停顿下来后，需要执行的函数，与我们实现防抖的部分分离。

window.onload = function () {
  // 获取滚动父元素
  const oUl = document.getElementById(‘ul‘)
  // 编写防抖函数
  const debounce = (fn, delay) => {
    let timeout = null
    return () => {
      if (timeout) {
        window.clearTimeout(timeout)
      }
      timeout = setTimeout(fn, delay)
    }
  }
  oUl.addEventListener(‘scroll‘, debounce(() => {
    console.log(‘我是防抖的事件‘)
  }, 1000))
}

上面的写法没办法帮我们把 event 传进去，这里我们要把当前的作用域也传进去

window.onload = function () {
  // 获取滚动父元素
  const oUl = document.getElementById(‘ul‘)
  // 编写防抖函数
  const debounce = (fn, delay) => {
    let timeout = null
    return () => {
      const me = this
      const args = arguments
      if (timeout) {
        window.clearTimeout(timeout)
      }
      timeout = setTimeout(() => {
        fn.apply(me, args)
      }, delay)
    }
  }
  oUl.addEventListener(‘scroll‘, debounce(function(event) {
    console.log(‘event‘, event)
  }, 1000))
}

三、节流函数的示例（节流函数相对来说较难，但只要理解了闭包的关键点，就还好）

window.onload = function () {
  // 获取滚动父元素
  const oUl = document.getElementById(‘ul‘)

  // 编写节流函数
  const throttle = (fn, threshold) => {
    let timeout = null
    // 这里是闭包的关键，它存储在内存中，帮我们记录
    let last = new Date()
    threshold = threshold || 500
    return () => {
      const me = this
      const args = arguments
      let now = new Date()
      /*
        * 第一次进入，进入 setTimeout
        * 节流时间内进入，走 else，删掉上一次的 timeout
        * 一直到节流时间后进入，直接进入 if 块里面，直接执行
        */
      clearTimeout(timeout)
      if (now - last >= threshold) {
        fn.apply(me, args)
        last = now
      } else {
        timeout = setTimeout(() => {
          fn.apply(me, args)
        }, threshold)
      }
    }
  }
  oUl.addEventListener(‘scroll‘, throttle(function(event) {
    console.log(‘event‘, event)
  }, 1000))
}

老实说：直接手写的话，还是要理解透彻有点。或者，多写几次。

---

todo.