Vue3中的极致防抖/节流详解(附常见方式防抖/节流)
作者:桃小瑞 发布时间:2024-05-08 10:12:37
标签:vue3,防抖,节流
前言
今天给大家带来的是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 了一份🤭🤭。
代码
// 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){
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">
来源:https://juejin.cn/post/7196150790368215077


猜你喜欢
- 配置环境:redhat6.5server1:redis(172.25.254.1)server2:php(172.25.254.2)serv
- 引言:闲来想到冒泡排序中的列表数据的排序,就想试试用随机数生成一个列表来排序试试,于是做了一下实验,本人实在是属于入门阶段,研究了一下终究还
- 索引是以表列为基础的数据库对象。索引中保存着表中排序的索引列,并且纪录了索引列在数据库表中的物理存储位置,实现了表中数据的逻辑排序。通过索引
- 一.Pytorch虚拟环境简介Torch是一个用于深度学习的=数学计算库,而Pytorch则是一个基于Torch的Python机器学习库,可
- 本文实例讲述了python的keyword模块用法。分享给大家供大家参考。具体如下:Help on module keyword:NAME
- Python 私有函数的实例详解与大多数语言一样,Python 也有私有的概念:• 私有函数不可以从它们的模块外面被调用• 私有类方法不能够
- 安装淘宝镜像:要安装Angular4。于是我对着一股浓郁口音的视频开启了Angular4安装之旅。那口音说了,ang哥乐4不是那么好装的,由
- 题目描述这篇博文是数字图像处理的大作业. 题目描述:给定40张不同风格的纹理图片,大小为512*512,要求将每张图片分为大小相同的9块,利
- 1.定义在某些情况下,一个类的对象是有限且固定的,比如季节类,它只有 4 个对象;再比如行星类,目前只有 8 个对象。这种实例有限且固定的类
- 多态多态:顾名思义九四多种形态\状态,就是同一种行为对不同的子类[对象]有不同的行为表现要想实现多态 必须有两个前提需要遵守:1.必须存在一
- 平常需要怎么做来维护数据库吗?1. 允许收缩数据库中的每个文件以删除未使用的页。数据和事务日志文件都可以收缩。数据库文件可以作为组或单独地进
- 浅谈NumPy中的维度AxisNumPy中的维度是一个很重要的概念,很多函数的参数都需要给定维度Axis,如何直观的理解维度呢?我们首先以二
- 本文实例讲述了Python实现输出某区间范围内全部素数的方法。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -*-
- // 涉及命名空间 using System; using System.Collections; using System.Compone
- INI介绍INI是英文“初始化”(initialization)的缩写,被用来对操作系统或特定程序初
- 一、撤销修改(git add/rm 之前)git checkout -- * //是撤销从上次提交之后所做的所有修改git c
- 前段时间在论坛上有人问到一个淘宝网上的hover伪类实现的效果如果兼容ie6。其实,问题很简单,就是hover伪类在IE6中得不到很好的支持
- 目的:在百度贴吧输入关键字和要查找的起始结束页,获取帖子里面楼主所发的图片思路:获取分页里面的帖子链接列表获取帖子里面楼主所发的图片链接列表
- 递归函数两大特点:1.能够调用函数自身2.至少有一个出口(结束函数自身调用)函数实现:def calnum(num): if n
- Mysql简易索引一、没有索引的时候如何查找先忽略掉索引这个概念,如果现在直接要查某条记录,要如何查找呢?在一个页中查找如果表中的记录很少,