<script setup>
import { computed } from "vue";
import { watch,ref , customRef} from "vue"
/**
* Implement the function
*/
function useDebouncedRef(value, delay = 1000) {
/** const v = ref(value);
let timer = null;
const c = computed({
get(){
return v.value
},
set(newV){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
v.value =newV
},delay)
}
})*/
let _v = value;
let timer = null;
return customRef((track,trigger)=>{
return {
get:()=>{
track()
return _v
},
set:(newV)=>{
if(timer) clearInterval(timer)
timer=setTimeout(()=>{
_v = newV
trigger()
},delay)
}
}
})
}
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>
