✨ 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>