Dboun

Fungsi dboun ialah utiliti yang direka untuk mengehadkan kadar sesuatu fungsi dilaksanakan. Ia memastikan bahawa fungsi yang disediakan (fn) dipanggil hanya selepas kelewatan (kelewatan) yang ditentukan telah berlalu sejak seruan terakhir. Secara lalai, kelewatan ditetapkan kepada 400 milisaat.

Ini amat berguna untuk mengendalikan acara yang kerap berlaku, seperti mengubah saiz, menatal atau menaip, dengan menghalang fungsi yang disediakan daripada dipanggil secara berlebihan.

Contoh Penggunaan

Senario: Input Carian dengan Debounce

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

Dalam contoh ini:

• handleSearch ialah fungsi yang mengendalikan logik carian.
• debouncedSearch memastikan bahawa handleSearch dilaksanakan hanya selepas 300 milisaat tidak aktif dalam menaip.

Parameter

1. fn (Fungsi): Fungsi yang akan dilaksanakan selepas kelewatan nyahlantun.

   • Ini ialah fungsi panggil balik yang akan digunakan selepas kelewatan yang ditentukan.

2. kelewatan (Nombor, pilihan): Bilangan milisaat untuk menunggu sebelum menggunakan fn. Lalai kepada 400 milisaat.

   • Ini menentukan selang nyahlantun.

Pulangan

Fungsi dboun mengembalikan versi fn nyahlantun baharu. Fungsi yang dikembalikan melambatkan seruan fn sehingga selepas kelewatan milisaat berlalu sejak kali terakhir fungsi yang dikembalikan dipanggil.

Bagaimana Ia Berfungsi

• Apabila fungsi yang dikembalikan dipanggil, ia mengosongkan sebarang set pemasa sedia ada untuk fungsi tersebut (clearTimeout(timeout)).
• Pemasa baharu kemudian ditetapkan (setTimeout) untuk memanggil fn selepas kelewatan yang ditentukan.
• Jika fungsi yang dikembalikan dipanggil semula sebelum tempoh kelewatan tamat, pemasa sebelumnya dikosongkan dan ditetapkan semula.

Aplikasi Praktikal

1. Pengendalian Input: Nyahlantun menghalang pelaksanaan berlebihan pengendali acara apabila pengguna menaip dalam medan input.
2. Ubah Saiz Acara: Urus prestasi dengan menyahlantun pengendali acara ubah saiz tetingkap.
3. Acara Tatal: Elakkan kesesakan prestasi dengan mengawal kekerapan pengendali acara tatal dilaksanakan.

Nota

• Jika anda memerlukan pelaksanaan segera diikuti dengan kelewatan (tingkah laku seperti pendikit), fungsi ini tidak menyediakan fungsi itu di luar kotak.
• Sentiasa pastikan kelewatan adalah sesuai untuk kes penggunaan untuk mengimbangi responsif dan prestasi.

Keserasian Pelayar

Fungsi dboun menggunakan ciri JavaScript/TypeScript moden, menjadikannya serasi dengan kebanyakan persekitaran moden. Untuk persekitaran yang lebih lama, pertimbangkan untuk mengalihkan kod.

Menguji

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

Atas ialah kandungan terperinci Dboun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!