<script setup>
import { watch, customRef, ref } from "vue"
/**
* Implement the function
*/
function useDebouncedRef(value, delay = 200) {
const v = ref(value);
let t;
return new Proxy(v, {
get(target, key) {
return Reflect.get(target, key);
},
set(target, key, value) {
clearTimeout(t);
t = setTimeout(() => {
Reflect.set(target, key, value);
}, delay)
return true;
}
})
}
const text = useDebouncedRef("hello")
/**
* Make sure the callback only gets triggered once when entered multiple times in a certain timeout
*/
watch(text, (value) => {
console.log(value)
})
</script>
<template>
<input v-model="text" />
</template>
