Debouncing and Throttling Explained Through Examples | CSS-Tricks
Posted by jpluimers on 2021/03/10
TL;DR of https://css-tricks.com/debouncing-throttling-explained-examples/:
- debounce: Grouping a sudden burst of events (like keystrokes) into a single one.
- throttle: Guaranteeing a constant flow of executions every X milliseconds. Like checking every 200ms your scroll position to trigger a CSS animation.
- requestAnimationFrame: a throttle alternative. When your function recalculates and renders elements on screen and you want to guarantee smooth changes or animations. Note: no IE9 support.
Full article [WayBack] Debouncing and Throttling Explained Through Examples | CSS-Tricks
Delphi implementations:
- Throttling in [WayBack] TNotifyEvent debouncing in Delphi – Code Partners
- Explanation why the Code Partners are wrong: [WayBack] Nice article – but unfortunately a bit wrong… – Stefan Glienke – Google+
- Both in https://bitbucket.org/sglienke/spring4d/src/fb18fd22613754cb98a7fda64b14627f2d8010a7/Source/Reactive
- Example: a delayed search while the user is typing into an edit
TObservable.FromEventPattern(Edit1, 'OnChange'); .Throttle(1000) .ObserveOn(TScheduler.MainThread) .Subscribe( procedure(const args: TNotifyEventArgs) begin Caption := Format('searching for %s', [TEdit(args.Sender).Text]); end);
- Example: a delayed search while the user is typing into an edit
–jeroen






Leave a comment