在日常开发中有输入框输入内容后,等待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 = val
timer = 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>
?