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

Posted 2023-04-02 林恒smileZAZ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录--Vue 3 中的极致防抖/节流（含常见方式防抖/节流）相关的知识，希望对你有一定的参考价值。

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

今天给大家带来的是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 中的极致防抖/节流(含常见方式防抖/节流)这篇文章的全部内容，如有不足或朋友你有更好的方式或者其他独到的见解，欢迎评论 + 私信。

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

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

本文转载于:

https://juejin.cn/post/7196150790368215077

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。