Debouncing în JavaScript este o practică folosită pentru a îmbunătăți performanța browserului. Ar putea exista unele funcționalități într-o pagină web care necesită calcule care necesită timp. Dacă o astfel de metodă este invocată frecvent, ar putea afecta foarte mult performanța browserului, deoarece JavaScript este un limbaj cu un singur thread. Debouncing este o practică de programare folosită pentru a se asigura că sarcinile consumatoare de timp nu se declanșează atât de des încât să blocheze performanța paginii web. Cu alte cuvinte, limitează rata la care o funcție este invocată.
haideți să luăm un exemplu în timp real al unui site de magazin electronic, avem o casetă de căutare în care căutăm un produs și vă va oferi sugestii legate de întrebarea dvs.,
să presupunem că se face un apel API atunci când căutați.
Într-un câmp normal de introducere, atunci când apelați o funcție, aceasta va invoca la fiecare apăsare de tastă, ceea ce înseamnă că apelul API este declanșat pentru fiecare apăsare de tastă introdusă, executând acele multe apeluri. influențează performanța browserului.
Soluție: debouncing va veni ca un salvator în astfel de cazuri, logica de bază pentru a rezolva această problemă este atunci când utilizatorii fac pauză între cele două apăsări de taste, apoi apelează API-ul
HTML: onkeyup, numim metoda de debounce.
‹input type=”text” onkeyup=”debounce()”›
Javascript:
https://codepen.io/ajinkyakhandar/pen/KKQOXbX
Explicația codului:
1. let debounce = doSomeMagic(getCount, 300)
onkeyup numim metoda debounce, care va face ceva magic peste metoda getCount, aici metoda getCount putem presupune o funcție care apelează API-ul de căutare.
2. În doSomeMagic trecem două argumente o funcție getCount și întârzierea dintre două apăsări de taste,
3. DoSomeMagic va returna o funcție, astfel încât să putem executa debounce()
4. Pentru a adăuga o întârziere între apăsări de taste, se va seta un timeout care ia „d” ca întârziere
5. context și argumente care gestionează argumentele pentru getCount dacă există
6. După fiecare execuție API, ștergem timpul de expirare
