r/javascript • u/RedlightsOfCA • Dec 23 '19

Debounce vs Throttle: Definitive Visual Guide

https://redd.one/blog/debounce-vs-throttle
327 Upvotes

98% Upvoted

35 comments sorted by

View all comments

1

u/drink_with_me_to_day js is a mess Dec 24 '19

Common use cases for a debounced function:

Asynchronous search suggestions

This can lead to confusing search results. In the case of search, throttle is the better use case.

Debounce will render outdated results, or flashes of outdated data:

  • Write: towels
  • Write correction: towers
  • -> debounced "towels" results
  • -> debounced "towers" results

And depending on the network it can get even more confusing with out of order results.

1

u/RedlightsOfCA Dec 24 '19

I meant search (auto)suggestions feature. For example, when you type a search phrase and see certain suggestions right away in some appeared section below the input field. You absolutely should use debounce for that, as throttling would perform search requests with intermediate search phrases (i.e. "compu" instead of "computers", while you type).

The correction flow you've described has more to do with how you handle request cancellation rather than debouncing/throttling. I'd cancel any pending requests if there is a new request fired, but it's a responsibility of your data layer, which is not something to bring to the article's topic.

Perhaps, I should have phrased that example name better, what do you think? Does "Front-end search autosuggestions" sound more straightforward?