Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

目录
  • 前言
  • 防抖或节流原理
    • 防抖(debounce)
      • 示例代码
      • 使用
    • 节流(throttle )
      • 示例代码
    • 使用
  • 环境说明
  • 新封装
    • 防抖(debounce)
      • 常见封装-1
      • 常见封装-2
      • 新封装
    • 使用
    • 节流(throttle)
      • 常见封装-1
      • 常见封装-2
      • 新封装
  • 总结

前言

今天给大家带来的是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)

新封装

节流和防抖在封装和使用上都是一模一样的,但为了方便阅读,我还是在下方为各位朋友 copy 了一份

(0)

相关推荐

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

  • vue3+ts如何通过lodash实现防抖节流详解

    目录 安装lodash 防抖 节流 补充:vue3 引入lodash报错 总结 安装lodash npm i --save-dev @types/lodash 在组件中引入lodash import * as _ from 'lodash' 防抖 _.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行,也就是停止改变几秒后执行 参数 func (Function): 要防抖动的函数. [wait=0] (number): 需要延迟的毫秒数. [o

  • vue函数防抖与节流的正确使用方法

    前言 1.防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发. 节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率 举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行.就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新

  • 浅析Vue 防抖与节流的使用

    在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据. 这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一段时间,保存一次,这时候,就可以使用防抖和节流. 概念 说白了, 防抖节流就是使用定时器 来实现我们的目的. 防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 典型的案例就是输入框搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,则重新计时. 节流(throt

  • Vue中使用防抖与节流的方法

    目录 何为防抖/节流 防抖(debounce) 节流(throttle) 页面使用 使用场景 总结 何为防抖/节流 首先先说说何为防抖与节流 防抖(debounce) 防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove).输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖 节流(throttle) 节流就是短时间内会多次触发相同的事件,而我们的目

  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    目录 前言 防抖或节流原理 防抖(debounce) 示例代码 使用 节流(throttle ) 示例代码 使用 环境说明 新封装 防抖(debounce) 常见封装-1 常见封装-2 新封装 使用 节流(throttle) 常见封装-1 常见封装-2 新封装 总结 前言 今天给大家带来的是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单.更清晰. 在前端的开发过程中,在涉及到与用户交互的过程中是基

  • Vue3中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

  • Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • Vue3中ref与reactive的详解与扩展

    一.ref和reactive 死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj}) vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新 vue2中响应式是通过defineProperty实现的,vue3中是通过ES6的Proxy来实现的 1.reactive reactive的参数必须是一个对象,包括json数据和数组都可以,否则不具有响应式 如果给reactive传递了其他对象(

  • Vue3中的组合式 API示例详解

    目录 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 更好的类型推导 生产包体积更小 与选项式 API 的关系 组合式 API 是否覆盖了所有场景? 可以同时使用两种 API 吗? 选项式 API 会被废弃吗? 组合式 API 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件.它是一个概括性的术语,涵盖了以下方面的 API: 响应性 API:例如ref()和reactive(),使我们可以直接创建响应式状态.计算属性和侦听器. 生命周期钩子:例如o

  • C++中volatile关键字的使用详解以及常见的误解

    为什么使用volatile ? C/C++中的 volatile 关键字 和const对应,用来修饰变量,通常用于建立语言级别的memory barrier.这是BS在"The C++ Programming Language"对volatile修饰词的解释: A volatile specifier is a hint to a compiler that an object may change its value in ways not specified by the lang

  • JS前端同源策略和跨域及防抖节流详解

    目录 引言 jQuery中JSONP的实现 防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表 节流[重点] 防抖和节流的区别 引言 协议,域名,端口相同,就具有相同的源 同源策略:浏览器提供的一个安全策略 跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互 解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求 通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域

  • Vue2.x与Vue3.x中路由钩子的区别详解

    目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor

随机推荐