<script setup>
import { watch , ref,reactive,computed } from "vue"
/**
* Implement the function
*/
function useDebouncedRef(value, delay = 200) {
const modelValue = ref(value);
let timer;
const debounceRef = computed({
get(){
return modelValue.value
},set(val){
if(timer) clearTimeout(timer);
timer= setTimeout(()=>{
modelValue.value = val;
clearTimeout(timer);
timer = null;
},delay)
}
})
return debounceRef;
}
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>
