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

今天给大家带来的是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 = nullfunction 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 = nullfunction 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 和 refimport { 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 = nullfunction 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 方式防抖/节流

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