Debounce vs throttle, gevisualiseerd

Debounce vs throttle visualisatie

Debounce vs throttle in JavaScript, gevisualiseerd | We.Inc

Beweeg uw pointer over het vlak en zie ruwe events, gedebouncede aanroepen en gethrottlede aanroepen op één tijdlijn. Debounce- en throttle-functies om te kopiëren, plus React-hooks.

Debounce wacht tot aanroepen een ingestelde tijd stoppen en draait dan één keer, wat past bij zoekvelden en automatisch opslaan. Throttle draait hooguit één keer per interval zolang er aanroepen blijven komen, wat past bij scrollen, resizen en het volgen van de pointer. Beide nemen een functie en een vertraging in milliseconden, en geven een verpakte functie terug die u in plaats daarvan aanroept.

Welke u gebruikt

Situatie
Gebruik
Waarom

Zoeken tijdens het typen
Debounce, ongeveer 300 ms
Eén verzoek nadat de persoon pauzeert

Een formulier automatisch opslaan
Debounce, ongeveer 1000 ms
Eén keer opslaan zodra het typen tot rust komt

Scrollpositie of voortgangsbalk
Throttle, ongeveer 100 ms
Regelmatige updates tijdens het scrollen

Layoutberekeningen bij het resizen van het venster
Throttle of debounce
Throttle voor live feedback, debounce voor de uiteindelijke grootte

Dubbel klikken op verzenden voorkomen
Debounce met leading edge
De eerste klik telt, herhalingen worden genegeerd

De twee woorden worden door elkaar gehaald omdat ze allebei beperken hoe vaak een functie draait. Het vlak hieronder toont het verschil op een gedeelde tijdlijn: elk ruw event als een dun streepje, elke gedebouncede en elke gethrottlede aanroep als een stip. Wijzig de vertraging en het patroon verandert mee.

Beweeg uw pointer of vinger over het vlak, of houd een toets ingedrukt terwijl het vlak focus heeft.
Ruwe events vullen de bovenste baan. De middelste baan toont gedebouncede aanroepen, de onderste baan gethrottlede aanroepen.
Sleep de schuifregelaar voor de vertraging en herhaal om te zien hoe de tussenruimte beide patronen verandert.
Kopieer de gewone functies of de React-hooks hieronder voor uw eigen code.

Maak de gedebouncede functie één keer aan. Een nieuwe maken bij elke React-render reset de timer, waardoor hij nooit afgaat.
Annuleer openstaande aanroepen wanneer een component unmount, anders kan een late aanroep iets bijwerken dat niet meer bestaat.
Voor animatiewerk dat aan scrollen is gekoppeld, werkt requestAnimationFrame vaak beter dan een vast throttle-interval.
Debounce het dure deel, zoals het netwerkverzoek, niet de eigen state van het invoerveld, anders voelt typen traag aan.

Veelgestelde vragen

Wat is het verschil tussen debounce en throttle?

Debounce start zijn timer bij elke aanroep opnieuw en draait pas wanneer de aanroepen pauzeren. Throttle negeert aanroepen binnen het huidige venster, maar draait opnieuw zodra het venster voorbij is, dus het gaat gelijkmatig af tijdens een lange reeks.

Wat zijn leading en trailing edges?

De leading edge is de eerste aanroep van een reeks; de trailing edge is het moment waarop het interval van de reeks eindigt. Een trailing debounce draait na de pauze, een leading debounce draait meteen en negeert daarna aanroepen tot de pauze. Throttles kunnen op een van beide edges afgaan, of op allebei.

Heb ik lodash nodig voor debounce?

Nee. De functies op deze pagina zijn elk maar een paar regels. Een bibliotheekversie voegt opties toe zoals maxWait, cancel en flush, die handig zijn maar makkelijk zelf toe te voegen als u er maar één van nodig hebt.

Hoe lang moet de vertraging zijn?

Er is niet één juist getal. Begin rond 300 milliseconden voor typen en 100 voor scroll- of pointerwerk, en stel daarna bij op gevoel. Korter voelt responsiever, maar bespaart minder werk.

Hoe debounce werkt

Elke aanroep wist de openstaande timer en start een nieuwe. Pas wanneer de timer de volledige vertraging overleeft, draait de oorspronkelijke functie, met de argumenten van de laatste aanroep.
Dat maakt debounce ideaal voor intentie: elke toetsaanslag maakt u niet uit, alleen het woord dat iemand heeft uitgetypt. De prijs is vertraging, want er gebeurt niets tot de pauze.

Hoe throttle werkt

Een throttle onthoudt wanneer hij voor het laatst draaide. Een aanroep binnen het interval wordt genegeerd of, in de trailing-versie, bewaard om te draaien wanneer het interval eindigt. Aanroepen buiten het interval draaien meteen.
Gebruik het wanneer de gebruiker doorlopende feedback moet zien, zoals een sticky header die op scrollen reageert, maar draaien bij elk event verspilling zou zijn.

Versies in gewoon JavaScript

debounce(fn, wait)

Trailing edge. cancel() laat elke openstaande aanroep vallen.

throttle(fn, wait)

Draait op de leading edge en dan nog één keer aan het einde van het venster als er intussen aanroepen binnenkwamen, zodat de laatste waarde nooit verloren gaat.

React-hooks

useDebouncedCallback

Houdt één timer aan voor de hele levensduur van het component, roept altijd de nieuwste callback aan, en wist de timer bij unmount.

useThrottledValue

Geeft een kopie terug van een snel veranderende waarde die hooguit één keer per interval wordt bijgewerkt.

Ruwe events

Gedebounced ({n} ms)

Gethrottled ({n} ms)

Visualisatie

Beweeg over het vlak. Dunne streepjes zijn ruwe events; stippen zijn aanroepen die na debouncen of throttlen echt zijn uitgevoerd.

Vertraging: {n} ms

Eventvlak: beweeg de pointer hier of houd een toets ingedrukt

Beweeg hier (of geef focus en houd een toets ingedrukt)

De tijdlijn toont de laatste zes seconden; de getallen tellen de aanroepen in dat venster.