脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 customRef封装防抖函数

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

您可能感兴趣的文章:

相关文章

最新评论