Learn about anti-shake and throttling using JQuery

A list,
  • Debounce: No matter how many times it is executed, it will be the last one (automatic computer sleep is a classic debounce)
  • Throttling: calls that are performed multiple times as long as the first call is valid.
Two, anti-shake throttling code
< - HTML part -- -- > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" > < / script > < button Id ="debounce"> </button> <button id="throttle">Copy the code
Function move(e) {console.log("Hello World! ); Function () {var arg = arguments[0]} function () {var arg = arguments[0] ClearTimeout (debItem)} debItem = setTimeout(function () {fn(arg) // event pass function}, Var thrItem = null return function () {var arg = arguments[0] // get event if (thrItem) {return} thrItem = setTimeout(function () {fn(arg) // thrItem = null}, 2000) } } $(document).ready(function () { $("#debounce").on('click', debounce(move)); $("#throttle").on('click', throttle(move)); });Copy the code

\