Co jest debunowanie w JavaScript?

Czy kiedykolwiek kliknąłeś przycisk strony internetowej i czujesz, że zajmuje to trochę za dużo czasu na załadowanie treści. Podobnie podczas wpisywania na pasku wyszukiwania wyszukiwanie wymaga krótkiego opóźnienia, aby wyświetlić wyniki. Nawet jeśli nigdy tego nie poczułeś, powiem ci, że programiści używali tej funkcji Obalić Aby osiągnąć to opóźnienie, a to opóźnienie jest bardzo przydatne, jeśli chodzi o zatrzymanie niepotrzebnych żądań na serwer.

Na przykład, jeśli ustawiłeś funkcję na rozmiaru Window i teraz wyobraź sobie, że wywołuje funkcję ciągłe, podczas gdy my rozmiar naszego okna. Czy to skuteczny sposób? Oczywiście nie dlatego, że wywołanie tej konkretnej funkcji nieustannie jest niepotrzebne, a zatem wpłynęłoby na wydajność.

W tym poście porozmawiamy o tym, co denerwuje w JavaScript i jego wdrożenie z niektórymi przykładami.

Co to jest debun?

Najprostszą definicją debunowania byłoby to, że jest to technika programowania mającą na celu ograniczenie powołania czasochłonnego (więcej obliczeń) często lub tylko wyzwala funkcję w razie potrzeby. Załóżmy, że jesteś programistą i tworzysz pasek wyszukiwania. Chciałbyś pokazać sugestie tylko po zakończeniu użytkownika pisania oznaczającego nie na każdym klawiszecie. Dlatego za pomocą debunowania w JavaScript, można poprawić wydajność swojej strony internetowej.

W jaki sposób działa debologiczne? Cóż, jeśli umieszczę go w prostych słowach, to debróżnia działa, umieszczając timer „czekaj” przed wykonaniem określonego kawałka kodu. A jeśli z powodu pewnej sytuacji ten sam proces jest ponownie wykonany. Następnie, zamiast tworzyć kolejkę dwóch samych wydarzeń, zatrzymujemy stary proces i skupiamy się tylko na wykonaniu ostatniego. To również oszczędza nas przed sytuacją „butelki”. Dla tych, którzy nie są zaznajomieni z „wąskim gardłem”, jest to stan, który występuje, gdy próbujesz wypchnąć więcej rzeczy na ekranie niż moc obliczeniowa serwera

Debuinacja wdrożenia

Możemy zaimplementować debucję w JavaScript, korzystając z poniższych kroków:

• Utwórz licznik opóźnienia w funkcji i ustaw go na 0
• Zresetuj timer, jeśli podana funkcja zostanie ponownie wywoływana
• Wywołaj funkcję debuncji tylko po upływie limitu czasu.

Część kodowania HTML

Pierwszy krok we wdrażaniu debucji w JavaScript będzie wymagał elementu HTML, na którym przypiszmy zdarzenie kliknięcia.

Najpierw utwórz element przycisku w HTML:

Kliknij

Tag skryptu służy do odwołania się do pliku, w którym napiszemy nasz kod JavaScript kod.JS. Użyliśmy również ID atrybut, którego użyjemy do odwołania elementu przycisku HTML w JavaScript.

Teraz, gdy skończyliśmy z częścią kodowania HTML, zaimplementujmy funkcję debuunce w JavaScript.

Część kodowania JavaScript

Funkcja wdrażania techniki debuncia byłaby taka:

// Uzyskaj odniesienie z przycisku
var mybtn = dokument.getElementById („myBtn”);
// Zdefiniowana funkcja debuncji
const debunce = (myfunc, opóźnienie) =>
Niech debeuncetimer;
return funkcja ()
const context = to;
const args = argumenty;
Cleartimeout (DebounceTimer);
DebounceTimer = settimeout (() => myfunc.Zastosuj (kontekst, args), opóźnienie);


// Dodaj słuchacz zdarzeń do przycisku
MYBTN.addEventListener („kliknij”, debunce (function ()
// alarm będzie widoczny po dwóch sekundach czasu
Alert („Witaj świat po 2 sekundach”);
, 2000));

W powyższym kodzie najpierw otrzymujemy odniesienie do przycisku określonego w HTML i dodajemy zdarzenie kliknięcia na tym przycisku. Każde kliknięcie przycisku wywołałoby funkcję debuunce.

w Obalić funkcja, bierzemy dwa argumenty, pierwsza to funkcja, a druga to czas opóźnienia lub czas na czas. Następnie zainicjowaliśmy DebeunceTimer który śledzi okres opóźnienia.

Gdy użytkownik kliknie przycisk raz, funkcja debuncji zostanie wywołana po opóźnieniu.

Tak więc, jeśli użytkownik kliknie przycisk, a następnie ponownie kliknie przycisk przed końcem opóźnienia, wówczas licznik czasu resetuje się, a początkowe opóźnienie zostanie wyczyszczone.

Cała ta funkcjonalność jest osiągana przez funkcję cleartimeout ().

Zobaczmy wyjście:

Widzimy, że kiedy klikamy przycisk, wielokrotnie nie widzimy żadnego wyjścia. Jednak kiedy kliknęliśmy przycisk ostatnim razem i zostawiliśmy go, zobaczyliśmy wiadomość ostrzegawczą po dwóch sekundach. Stąd możemy to stwierdzić Każde kliknięcie wywołuje funkcję debuunce i resetuje timer opóźniając połączenie.

Wniosek

Debuina jest techniką programowania stosowaną przez programistów w celu ograniczenia liczby połączeń do zdarzenia lub tylko w razie potrzeby lub tylko dla jednego przypadku użycia. Technika debologiczna jest stosowana w czasochłonnej funkcji, która ma wiele obliczeń, więc unikamy niepotrzebnego wywołania tej funkcji. Aby być konkretnym, debunowanie można zastosować w paskach wyszukiwania, sugestywnych paskach tekstowych, treściach ładowania stron internetowych E.g Facebook, Instagram i tak dalej.

W tym poście omówiliśmy, czym jest debuncing w JavaScript, i spojrzeliśmy na jego działanie i wdrożenie w JavaScript.