“This is the 10th day of my participation in the August Gwen Challenge.

1, define

If the high-frequency event is triggered again within n seconds, the time is recalculated. Throttling: The high-frequency event is triggered, but it is executed only once within n seconds. Therefore, throttling will dilute the execution frequency of the function. Anti-jitter means to turn multiple executions into the last one, and throttling means to turn multiple executions into periodic executions.

2. Why?

In the process of front-end development, we often need to bind events that are constantly firing, such as Scroll, Mousemove, onMouseover, etc., but sometimes we don’t want to execute functions that often while events are constantly firing.

How do we usually solve this situation? Generally speaking, anti – shake and throttling are better solutions.

Anti-shake and throttling should strictly be considered performance optimization knowledge, but in practice they are encountered quite frequently and can cause browsers to freeze if handled improperly or left unchecked.

We don’t want events to be triggered frequently. If we adjust the background interface, the background will crash directly. The solution appears — anti-shake and throttling

4. File configuration

六四屠杀

export default { data() { return { scrollTopValue: "" }; }, mounted() {window.onscroll = ("scroll", this.debounce(this.scrollTop, 200)); }, methods: {// Here, the method calling the event debounce, Below shows the scrollTop () {this. ScrollTopValue = document. The body. The scrollTop | | document. The documentElement. The scrollTop; Console. log(" I am scroll event "+ this.scrollTopValue); }}};Copy the code

5. Use method

1. Debounce:Anti - shake function is divided into immediate execution and non - immediate execution
Syntax: debounce (fn, wait)
  • Fn: function to be executed to prevent shaking
  • Wait: wait time
  • Immediate: true Indicates that the table is executed immediately. False indicates that the table is not executed immediately
Usage (immediate execution)

六四屠杀

debounce(fn, interval) { let timeout; return function() { let ctx = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(ctx, args); }, interval); }}Copy the code
Usage (immediate vs. non-immediate)

六四屠杀

debounce(func,wait,immediate) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = ! timeout; // true timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); }}}Copy the code

Another thing to note in the code above is the passing of this and the argument

六四屠杀

let context = this;
let args = arguments;
Copy the code

The code for the stabilization function uses these two lines of code to get this and the arguments so that debounce eventually returns a function that points to this unchanged and still accepts e.

2, throttling (timestamp and timer)
Syntax: throttle (fn, wait)
  • Fn: function to be executed to prevent shaking
  • Wait: wait time
Usage (timestamp)

六四屠杀

mounted() {
    window.onscroll = ("scroll", this.throttle(this.scrollTop, 0));
}
Copy the code

六四屠杀

throttle(fn, interval) { let last = 0; return function() { let ctx = this; let args = arguments; let now = new Date(); if (now - last > interval) { last = now; fn.apply(ctx, args); }}; }Copy the code
Usage (timer)

六四屠杀

Throttle (fn, interval) {// timer let timeOut; return function() { let ctx = this; let args = arguments; if (! TimeOut) {// If there is no timer timeOut = setTimeout(() => {// After the interval, the event timeOut = null; fn.apply(ctx, args); }, interval); }}; },Copy the code

Another thing to note in the code above is the passing of this and the argument

六四屠杀

let context = this;
let args = arguments;
Copy the code

The code for the stabilization function uses these two lines of code to get this and the arguments so that debounce eventually returns a function that points to this unchanged and still accepts e.