如何创建一个带防抖的响应式变量

如何创建一个带防抖的响应式变量

在以往的开发中,用到输入框对后台进行查询时,每次都要去引入一个debounce,有没有觉得很烦的,本来import写的就多,眼花缭乱的,偶然间看到vue3支持创建一个自定义的响应式变量,那么思考是否可以自己写一个自定义的在声明时就带响应式呢。

实现

核心就是如何利用customRef方法,在写入数据的时候,来塞入一个防抖逻辑,话不多说往下看。

创建一个hook函数文件useDebounceRef.js

js 复制代码
import {customRef} from "vue";

/**
 * 防抖函数逻辑
 */
export function debounce(fnc, wait) {
    let timer = null;
    return function (...arg) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fnc.apply(this, arg);
        }, wait);
    };
}

/**
 * 创建一个带防抖的响应式变量
 */
export const useDebounceRef = (value, delay = 500) => {
    let timer = null; // 声明一个定时器变量
    return customRef((track, trigger) => {
        return {
            get() {
                track() // 收集
                return value
            },
            set(newVal) {
            // 防抖逻辑
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    trigger() // 派发
                    value = newVal
                }, delay);
            }
        }
    })
}

怎么样,是不是简简单单,这样我们就不用每次都要去引入防抖函数啦,但是节流可千万别这样,因为节流的机制问题,如果延时修改,会导致老数据覆盖新数据的bug,切记切记,有不同意见方案的,欢迎评论区留言,记得点个赞哦!!!

相关推荐
五点六六六8 分钟前
前端常见的性能指标采集
前端·性能优化·架构
吳所畏惧10 分钟前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
陈随易25 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic28 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮30 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温33 分钟前
DOM元素添加技巧全解析
前端
JSON_L35 分钟前
Vue 电影导航组件
前端·javascript·vue.js
用户214118326360243 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩1 小时前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT:结构、原理与安全隐患全解析
前端