Odbijanie w JavaScript to praktyka stosowana w celu poprawy wydajności przeglądarki. Strona internetowa może zawierać pewne funkcje wymagające czasochłonnych obliczeń. Częste wywoływanie takiej metody może znacząco wpłynąć na wydajność przeglądarki, ponieważ JavaScript jest językiem jednowątkowym. Odbijanie to praktyka programistyczna stosowana w celu zapewnienia, że czasochłonne zadania nie będą uruchamiane tak często, że spowoduje to zatrzymanie działania strony internetowej. Innymi słowy, ogranicza szybkość wywoływania funkcji.
weźmy przykład witryny e-sklepu w czasie rzeczywistym, mamy pole wyszukiwania, w którym wyszukujemy jakiś produkt, a on poda Ci sugestie związane z Twoim zapytaniem,
załóżmy, że podczas wyszukiwania wykonywane jest wywołanie API.
W normalnym polu wejściowym, gdy wywołujesz funkcję, będzie ona wywoływana przy każdym naciśnięciu klawisza, co oznacza, że wywołanie API jest wyzwalane po każdym wprowadzonym naciśnięciu klawisza, wykonując tyle wywołań, ile potrzeba mieć wpływ na wydajność przeglądarki.
Rozwiązanie: w takich przypadkach wybawieniem będzie odrzucenie. Podstawową logiką rozwiązania tego problemu jest sytuacja, w której użytkownicy robią pauzę między dwoma naciśnięciami klawiszy, a następnie wywołują API
HTML: onkeyup, wywołujemy metodę debounce.
‹input type=”text” onkeyup=”debounce()”›
Javascript:
https://codepen.io/ajinkyakhandar/pen/KKQOXbX
Objaśnienie kodu:
1. let debounce = doSomeMagic(getCount, 300)
onkeyup wywołujemy metodę debounce, która zrobi trochę magii w stosunku do metody getCount, tutaj metoda getCount możemy przyjąć funkcję wywołującą API wyszukiwania.
2. W doSomeMagic przekazujemy dwa argumenty, funkcję getCount i opóźnienie pomiędzy dwoma naciśnięciami klawiszy,
3. DoSomeMagic zwróci funkcję, dzięki czemu będziemy mogli wykonać debounce()
4. Dodanie opóźnienia między naciśnięciami klawiszy spowoduje ustawienie limitu czasu, który przyjmuje „d” jako opóźnienie
5. kontekst i argumenty, które obsługują argumenty funkcji getCount, jeśli takie istnieją
6. Po każdym wykonaniu API kasujemy timeout
