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封装防抖函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 导航内容设置选中状态样式的例子
今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
一步步讲解Vue如何启动项目
这篇文章主要给大家介绍了关于Vue如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-02-02
nginx配置域名后的二级目录访问不同项目的配置操作
这篇文章主要介绍了nginx配置域名后的二级目录访问不同项目的配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue项目怎样用nginx反向代理WebSocket请求地址
这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
详解Vue.js和layui日期控件冲突问题解决办法
这篇文章主要介绍了详解Vue.js和layui日期控件冲突问题解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
对vue 键盘回车事件的实例讲解
今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue项目启动出现cannot GET /服务错误的解决方法
这篇文章主要介绍了vue项目启动出现cannot GET /服务错误的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue实现分页加载效果
这篇文章主要为大家详细介绍了vue实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Vue实现购物车基本功能
这篇文章主要为大家详细介绍了Vue实现购物车的基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
本篇文章主要介绍了vue音乐播放器插件vue-aplayer的配置及其使用实例详解，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07