Debouncing vs Throttling in React

Melantun vs Mendikit dalam Reaksi

Kedua-dua nyahlantun dan pendikit ialah teknik untuk mengawal kadar sesuatu fungsi dilaksanakan, selalunya digunakan untuk meningkatkan prestasi apabila menangani peristiwa seperti mengubah saiz, menatal atau menaip. Berikut ialah penjelasan ringkas:

---

1. Melantun

Definisi: Melaksanakan fungsi selepas kelewatan yang ditentukan dari kali terakhir ia digunakan. Jika acara terus menyala, pemasa ditetapkan semula.

Kes Penggunaan: Apabila anda mahu fungsi berjalan sekali sahaja selepas pengguna berhenti mencetuskan acara.
Contoh: Panggilan API selepas pengguna berhenti menaip dalam kotak carian.

Contoh Kod (Menyahlantun dalam Reaksi)

import React, { useState } daripada "react";

fungsi nyah lantun(func, delay) {
biarkan pemasa;
kembali (...args) => {
clearTimeout(pemasa); // Kosongkan pemasa sebelumnya
pemasa = setTimeout(() => func(...args), delay); // Tetapkan pemasa baharu
};
}

const App = () => {
const [value, setValue] = useState("");

const handleChange = debounce((e) => {
console.log("Panggilan API untuk:", e.target.value);
}, 1000);

kembali (
type="text"
onChange={(e) => {
setValue(e.target.value);
handleChange(e);
}}
value={value}
pemegang tempat="Taip sesuatu..."
/>
);
};

eksport Apl lalai;

Kelakuan: Fungsi (handleChange) dilaksanakan hanya selepas pengguna berhenti menaip selama 1 saat.

---

1. Pendikit

Definisi: Melaksanakan fungsi paling banyak sekali dalam selang masa yang ditentukan, walaupun acara itu terus menyala.

Kes Penggunaan: Apabila anda mahu fungsi berjalan pada selang masa yang konsisten semasa acara yang kerap.
Contoh: Mengelog kedudukan halaman semasa menatal.

Contoh Kod (Pendikit dalam Reaksi)

import React, { useEffect } daripada "react";

pendikit fungsi(fungsi, had) {
biarkan lastFunc;
biarkan lastTime;
kembali (...args) => {
const now = Date.now();
jika (!lastTime || sekarang - lastTime >= had) {
func(...args);
lastTime = sekarang;
} lain {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
jika (Date.now() - lastTime >= had) {
func(...args);
lastTime = Date.now();
}
}, had - (sekarang - lastTime));
}
};
}

const App = () => {
const handleScroll = throttle(() => {
console.log("Tatal peristiwa dilog:", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handleScroll);
pulangan () => window.removeEventListener("scroll", handleScroll);
}, []);

kembali

Tatal ke bawah halaman;
};

eksport Apl lalai;

Kelakuan: Fungsi handleScroll merekodkan kedudukan tatal paling banyak sekali setiap saat, walaupun jika acara tatal menyala secara berterusan.

---

Atas ialah kandungan terperinci Debouncing vs Throttling in React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!