Debounce vs throttle w JavaScript na wizualizacji | We.Inc
Poruszaj kursorem nad polem i obserwuj surowe zdarzenia, wywołania po debounce i wywołania po throttle na jednej osi czasu. Gotowe do skopiowania funkcje debounce i throttle oraz hooki React.
Debounce czeka, aż wywołania ustaną na określony czas, a potem uruchamia się raz, co pasuje do pól wyszukiwania i autozapisu. Throttle uruchamia się najwyżej raz na interwał, dopóki wywołania napływają, co pasuje do przewijania, zmiany rozmiaru i śledzenia wskaźnika. Obie przyjmują funkcję i opóźnienie w milisekundach i zwracają opakowaną funkcję, którą wywołujesz zamiast oryginału.
Której użyć
Sytuacja
Użyj
Dlaczego
Wyszukiwanie podczas pisania
Debounce, około 300 ms
Jedno żądanie, gdy osoba zrobi przerwę
Autozapis formularza
Debounce, około 1000 ms
Zapis raz, gdy pisanie ucichnie
Pozycja przewijania lub pasek postępu
Throttle, około 100 ms
Regularne aktualizacje podczas przewijania
Obliczenia układu przy zmianie rozmiaru okna
Throttle lub debounce
Throttle dla bieżącej informacji zwrotnej, debounce dla rozmiaru końcowego
Blokada podwójnego kliknięcia wysyłki
Debounce z leading edge
Liczy się pierwsze kliknięcie, powtórzenia są ignorowane
Te dwa pojęcia są mylone, bo oba ograniczają częstotliwość uruchamiania funkcji. Pole poniżej pokazuje różnicę na wspólnej osi czasu: każde surowe zdarzenie jako cienką kreskę, a każde wywołanie po debounce i po throttle jako kropkę. Zmień opóźnienie, a wzór zmieni się razem z nim.
Przesuwaj kursor lub palec po polu albo przytrzymaj klawisz, gdy pole ma fokus.
Surowe zdarzenia wypełniają górny tor. Środkowy tor pokazuje wywołania po debounce, dolny wywołania po throttle.
Przesuń suwak opóźnienia i powtórz, aby zobaczyć, jak odstęp zmienia oba wzory.
Skopiuj zwykłe funkcje lub hooki React poniżej do własnego kodu.
Twórz funkcję z debounce tylko raz. Tworzenie nowej przy każdym renderze React resetuje jej timer, więc nigdy się nie uruchomi.
Anuluj oczekujące wywołania, gdy komponent jest odmontowywany, inaczej spóźnione wywołanie może zaktualizować coś, co już nie istnieje.
Przy animacjach powiązanych z przewijaniem requestAnimationFrame często sprawdza się lepiej niż stały interwał throttle.
Stosuj debounce do kosztownej części, takiej jak żądanie sieciowe, a nie do stanu samego pola, inaczej pisanie wydaje się opóźnione.
Najczęściej zadawane pytania
Czym różni się debounce od throttle?
Debounce restartuje swój timer przy każdym wywołaniu i uruchamia się dopiero, gdy wywołania ustaną. Throttle ignoruje wywołania w bieżącym oknie, ale uruchamia się ponownie, gdy tylko okno minie, więc działa równomiernie podczas długiej serii.
Czym są leading edge i trailing edge?
Leading edge to pierwsze wywołanie serii; trailing edge to moment, w którym kończy się interwał serii. Debounce na trailing edge uruchamia się po przerwie, a na leading edge od razu, po czym ignoruje wywołania aż do przerwy. Throttle może działać na jednej z krawędzi lub na obu.
Czy do debounce potrzebuję lodash?
Nie. Funkcje na tej stronie mają po kilka linii. Wersja z biblioteki dodaje opcje takie jak maxWait, cancel i flush, które są przydatne, ale łatwo dodać je samemu, jeśli potrzebujesz tylko jednej z nich.
Jak długie powinno być opóźnienie?
Nie ma jednej właściwej liczby. Zacznij od około 300 milisekund dla pisania i 100 dla przewijania lub wskaźnika, a potem dostosuj na wyczucie. Krótsze opóźnienie daje szybszą reakcję, ale oszczędza mniej pracy.
Jak działa debounce
Każde wywołanie czyści oczekujący timer i uruchamia nowy. Dopiero gdy timer przetrwa całe opóźnienie, oryginalna funkcja się uruchamia, z argumentami z ostatniego wywołania.
Dlatego debounce idealnie oddaje intencję: nie interesuje Cię każde naciśnięcie klawisza, tylko słowo, które ktoś skończył pisać. Kosztem jest opóźnienie, bo nic się nie dzieje aż do przerwy.
Jak działa throttle
Throttle pamięta, kiedy ostatnio się uruchomił. Wywołanie w obrębie interwału jest odrzucane albo, w wersji trailing, zapisywane do uruchomienia na końcu interwału. Wywołania poza interwałem uruchamiają się od razu.
Używaj go, gdy użytkownik powinien widzieć ciągłą informację zwrotną, na przykład przyklejony nagłówek reagujący na przewijanie, ale uruchamianie przy każdym zdarzeniu byłoby marnotrawstwem.