How can I prevent a function from being called too quickly or too many times in a row?

If you have an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be done by using:

• throttling: sample changes based on a time based frequency (eg _.throttle)
• debouncing: publish changes after a period of inactivity (eg _.debounce)
• requestAnimationFrame throttling: sample changes based on requestAnimationFrame (eg raf-schd)

See this visualization for a comparison of throttle and debounce functions.

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers

• Passing data to StatefulWidget and accessing it in it’s state in Flutter
• Prompted for FTP details even with FS_DIRECT set to true
• What is a structure in F#?
• What is a Top Level Domain (TLD)?
• How to compare MySQL and SQL?
• Change Enter Title Here help text on a custom post type
• How to pass class names to react components?
• Popular personalities full form of India?
• How to add custom post type items from frontend?
• How to pass in an instance variable from a React component to its HOC?
• How to scroll item in ListView so it is visible?
• Exclude certain module from a chunk webpack 4
• Get excerpt using get_the_excerpt outside a loop
• What is the full form DAA?
• Get the children of the parent category