在日常开发中有输入框输入内容后，等待1秒再进行查询，封装一个函数。

js代码部分

/*** 自定义的ref，实现属性和内部变量的数据转换* @param { object } value input输入的内容* @param { number } duration 延迟刷新的时间，单位：毫秒，默认：0* @param { function } func 外部传入的查询函数，不可传值* @returns 自定义的ref*/
export const eldebounceRef = (value, duration = 1000, func = null) => {let timer;return customRef((track, trigger) => {return {get() {// 依赖收集track();return value;},set(val) {clearTimeout(timer);// 派发更新trigger();value = valtimer = setTimeout(() => {if (func != null) {func()}}, duration)}}})
}

使用：

<template><div class="mainrouter"><el-row><el-col span="12" style="padding: 20px;"><div class="mb-4">input防抖：</div><div><el-input v-model="inputText" placeholder="防抖"></el-input><div>{{ inputText }}</div></div></el-col></el-row></div>
</template>
<script setup>
import { ref } from 'vue'
// 防抖查询，这里是1秒后查询
import { eldebounceRef } from '@/composables/anti-shake.js'
const inputText = eldebounceRef('1',1000,search)
// 函数，疫苗后输出inputText
function search(){console.log(inputText.value);
}
</script>