# ✨ useDebounceFn
useDebounceFn()
fonksiyonu işlemin tekrar çalıştırılmadan önce belirli bir süre beklemeyi sağlar. Fonksiyonun çağırılma sayısını sınırlamak için oluşturlmuştur.(Örn. Kullanıcının bir butona kaç kez basıldığına bakılmaksızın belirlenen sabit zamandan sonra işlemi gerçekleştirir.)
# 🏪 Kullanım
UseDebounceFn
fonksiyonunun kullanım şekli aşağıdaki gibidir.
import { ref } from 'vue';
import { useDebouncefn } from 'vue-composable-utils';
const updated = ref('');
const fn = e => (updated.value = e.target.value);
const debouncedFn = useDebouncefn({ delay: 1000, immediate: true }, fn);
# 🚀 Özellikler
useDebounceFn
fonksiyonu bir nesne {delay: 1000, immediate: true}
ve callback fonksiyonu olmak üzere iki parametre alır.
delay
--> Milisaniye cinsinden gecikme süresidir.
immediate
--> Eğer immediate true ise fonksiyon hemen tetiklenir.
fn
--> Debounce zamanından sonra yürütmek istediğimiz callback fonksiyondur.
# 💻 Uygulama
Aşağıdaki örneği kullanarak reaktif olarak nasıl çalıştığını görebilirsiniz.
Event handler called:
Delay is set to 1000ms.
<template>
<div>
<p>Event handler : {{ updated }}</p>
<input :value="updated" @input="debouncedFn" placeholder="input" />
<input disabled placeholder="output" :value="updated" />
<small>Delay is set to 1000ms.</small>
</div>
</template>
<script>
import { ref } from 'vue';
import { useDebounceFn } from 'vue-composable-utils';
export default {
setup() {
const updated = ref('');
const fn = e => (updated.value = e.target.value);
const debouncedFn = useDebounceFn({ delay: 1000, immediate: true }, fn);
return { updated, debouncedFn };
},
};
</script>
<style scoped>
input {
margin: 0.5em;
padding: 0.8em;
}
</style>
← useDebounce useEmbed →