Vue3使用customRef封装防抖函数的方法详解
更新时间：2023年09月04日 09:16:29 作者：丢丢biubiu
防抖函数的作用是高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间,本文将给大家详细的介绍一下Vue3使用customRef封装防抖函数的方法,需要的朋友可以参考下
什么是customRef?
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
防抖 （多次触发 只执行最后一次）
作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒
使用customRef封装防抖函数
import { customRef } from "vue";
//设置默认的时间间隔为1000ms
export function debounceRef(value, duration = 1000) {
//闭包缓存计时器
let timer;
return customRef((tarck, trigger) => {
return {
get(){
//收集依赖
tarck();
return value;
},
set(val){
//短时间内连续触发改变这个val的事件,清除计时器,重新开始记时
clearTimeout(timer)
timer=setTimeout(()=>{
//派发更新
trigger()
value=val
},duration)
}
}
})
}可以在页面中使用，对一个输入框v-model输入，然后一个文本标签显示它的值
经过测试，防抖效果成功实现，只有对输入停止500ms后才会进行对set函数的触发
<template>
<div class="container">
<input v-model="text" placeholder="请输入内容" />
<p>{{ text }}</p>
</div>
</template>
<script setup>
import {debounceRef} from './debounce.js'
const text = debounceRef('',500);
</script>到此这篇关于Vue3使用customRef封装防抖函数的方法详解的文章就介绍到这了,更多相关Vue3 customRef封装防抖函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,下面这篇文章主要给大家介绍了关于vue3 如何将页面生成 pdf 导出,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
vue框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组件数量原来越多，组件之间难免需要相互通信。本文将为大家介绍四种组件间的通信方式，需要的可以参考一下2022-01-01
element ui的el-input-number修改数值失效的问题及解决
这篇文章主要介绍了element ui的el-input-number修改数值失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
因为新公司使用react技术栈，包括Umi、Dva、Ant-design等一系列解决方案。本文就简单的介绍一下vue转react入门指南，感兴趣的可以了解一下2021-10-10
这篇文章主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue+webpack实现异步加载的三种用法，文中给大家提到了vue+webpack实现异步组件加载的代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
这篇文章主要为大家详细介绍了Vue实现学生管理功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文提供了如何将Vue3的静态页面集成到基于Vue2的若依项目中,并确保能够访问Vue2的接口,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-09-09
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态2021-10-10
这篇文章主要介绍了Vue使用JSEncrypt实现rsa加密及挂载方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
最新评论