记录--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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--Vue 3 中的极致防抖/节流(含常见方式防抖/节流)的更多相关文章
- Vue axios 中提交表单数据(含上传文件)
伟大的画家都是先从模仿开始 的,我写的不好,很多还是抄袭,就是想提高自己的水平,没准坚持下来,我就变成一个厉害的角色了呢?
- 记录vue中一些有意思的坑
记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 记录Vue和Jquery混合开发中关于点击事件的一个bug
最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...
- webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation
如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装, 在国内安装node-sass失败的话,可以使用淘宝镜 ...
- [JavaScript] 函数节流(throttle)和函数防抖(debounce)
js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发,但是我们不想让他触发的这么频繁,于是我们就设置一个定时器让这个事件在 xxx 秒 ...
- vue项目中使用less或者sass的方法
半年木有更新博客了... 前段时间一直在学习vue,开始记录一下遇到的问题吧 这篇文章主要是总结一下vue中使用less或者sass的方法,以less为例(style.less) 主要是两种 1.对于 ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
随机推荐
- 探索C语言的内存魔法:动态内存管理解析
欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. 静态开辟内存 通过前面的学习,我们已经掌握了两种开辟内存的方法,分别是: #incl ...
- 使用OBS Studio软件进行桌面录屏
操作系统 :Windows10_x64 OBS Studio是开源免费的录屏和直播软件,支持Windows.macOS及Linux操作系统. 这里记录下桌面录屏和桌面区域录屏的使用,也方便我后续查阅( ...
- 推荐一款id生成器: Hashids
唯一 id 生成的方式有很多种,比较常见的有以下几种方式: 语言自带功能,如 Java 中的 UUID,常用于后端 第三方工具提供,如 npm 中的 nanoid,常用于前端 Twitter 开源的 ...
- C#后端接收前端的参数
接收参数 1. 直接使用 [FromBody] 特性来告诉 ASP.NET Core 将请求的 JSON 数据反序列化为 实体类 对象 [FromBody] BlogNewsDTO实体类 点击查看代码 ...
- 【Unity3D】动画混合
1 简介 2D动画.人体模型及动画.人物跟随鼠标位置中介绍了 Aniamtion.Animator.人体模型.人体骨骼.人体动画等基础知识及人体动画的应用,本文将进一步介绍动画混合. 实现动画 ...
- Eclipse文本编码格式修改为UTF-8 的方法
整理自网络,亲测可用,记录一下,方便下次查. 一般Java文件编码格式是UTF-8的.以下以默认GBK改为UTF-8为例. 1.改变整个工作空间的编码格式,这样以后新建的文件也是新设置的编码格式. e ...
- spring boot与junit集成测试
先创建一个REST接口 package com.laoxu.gamedog.controller; import org.springframework.web.bind.annotation.Req ...
- 解决etcd集群空间占用问题 mvcc: database space exceeded
一.查看状态 ./etcdctl --write-out=table endpoint status 可以看到空间占用(DB SIZE).本次是清理过了.原本达到了2G(为默认上限) 二.查看当前版本 ...
- 在SpringBoot中实践AOP编程
具体实践 Spring AOP是Spring框架中一个支持实现面向切面编程的模块,由于Spring Boot已经把Spring框架组合得非常好用,所以在基于Spring Boot框架的项目中实现AOP ...
- python文件加锁模块之fcntl
# 示例 import fcntl with open('./test.txt', 'w') as f: fcntl.flock(f, fcntl.LOCK_EX) # 对文件加锁,除加锁进程外其它进 ...