One. Function shake – proof

When the event is continuously triggered, the event handler is not executed. The event handler is executed only once if no event is triggered again within a certain period of time. If the event is triggered again before the set time, the delay starts again.

function debounce(fn, Delay) {// let timer = null // return function () {// Retain this context when called Let args = arguments // Each time an event is triggered, If (timer) {clearTimeout(timer)} timer = setTimeout(function () {fn.apply(context, args)} delay) } }Copy the code

Second, function throttling

Ensure that an event handler is called only once in a certain period of time when an event is continuously raised.

1. Timestamp implementation

Function throttle(fn, interval) {// last = 0, let last = 0, let last = 0, let last = 0; Return function () {// retain the call context let context = this // retain the call parameters let args = arguments // Let now = date.now (); If (now-last >= interval) {// If (now-last >= interval) {// If (now-last >= interval) {// If (now-last >= interval) {// If (now-last >= interval) {// If (now-last >= interval) {// If (now-last >= interval); fn.apply(context, args); }}}Copy the code

2. Timer implementation

function throttle(fn, wait) { let timeout; return function() { if (! timeout) { timeout = setTimeout(() => { timeout = null fn.call(this, arguments) }, wait) } } }Copy the code

3. Optimize anti-shake with throttling (timer + timestamp)

The problem with anti-shake is that if the user does something too frequently — he doesn’t wait for the delay to end before the next action — the callback is delayed countless times by regenerating the timer for the user each time. Frequent delays can lead to delayed responses and the same “this page is stuck” feeling.

Throttling is optimized to ensure that an event handler is called once in a certain period of time.

Function throttle(fn, delay) {// last = 0; Timer = null // throttle = null // return function () {// retain this context let context = this // retain the argument let args = Arguments let now = +new Date() // + is the unary operator, If (now-last < delay) {if (now-last < delay) {// If (now-last < delay) {// If (now-last < delay) {// If (now-last < delay) { ClearTimeout (timer) timer = setTimeout(function () {last = now fn. Apply (context, args)}, Last = now fn. Apply (context, args)}}}Copy the code

Third, summary

  • Function stabilization: Combine several operations into one operation. The idea is to maintain a timer that fires after the delay, but if it fires again within the delay, the timer will be cancelled and reset. In this way, only the last operation can be triggered.
  • Function throttling: causes functions to fire only once in a given period of time. The principle is to trigger the function by judging whether a certain time has been reached.
  • Difference: Function throttling guarantees that a true event handler will be executed within a specified period of time, no matter how frequently the event is triggered, whereas function buffering only fires once after the last event.
  • Scenarios: For example, in an infinite page loading scenario, we need the user to make Ajax requests every once in a while while the page is scrolling, rather than asking for data when the user stops scrolling. This scenario is suitable for throttling technology to achieve.

Four examples,

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <h1> </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </ H1 > < H1 > JS throttling and anti-shake </ H1 > < H1 > JS throttling and anti-shake </ H1 > </ H1 > </h1> </h1> </h1> </h1> </h1> </h1> </h1> </h1> </body> </body> <script throttle(fn, delay) { let last = 0, Timer = null return function () {// Retain this context when called let context = this // retain the arguments when called let args = arguments // Record the time when this callback is triggered Let now = +new Date(); If (now-last < delay) {if (now-last < delay) {// If (now-last < delay) {// If (now-last < delay) {// If (now-last < delay) { ClearTimeout (timer) timer = setTimeout(function () {last = now fn. Apply (context, args)}, Delay)} else {// If the interval exceeds the interval threshold we set, then the interval is not equal, Last = now fn.apply(context, Const better_scroll3 = throttle(() => console.log(' throttle + throttle, '); Triggered the scroll event '), 1000), the document. The addEventListener (' scroll 'better_scroll3) < / script > < / HTML >Copy the code