preface

Recently, I have been following up and learning a VUE project, during which I encountered anti-shake. I want to review this anti-shake function and summarize it.

background

In the project, I monitored the loading of pictures and printed them through the console. There were 30 pictures, so I printed them 30 times. In fact, I just want to listen until the 30th card is loaded, and then call the callback. Therefore, in order to reduce the number of printing and reduce frequent updates, optimization is carried out through the anti-shake function

The body of the

Let’s take a look at what is anti-shake? Why anti-shake? What does it do? How to write?

What is anti-shake?

The callback is executed n seconds after the event is triggered, and if it is triggered again within n seconds, the timer is reset. My personal understanding is that the game character magnification moves need to recharge for a certain amount of time. If this process is interrupted, it needs to rechargeCopy the code

Why anti-shake? What does it do?

Optimize project performance to make the project run faster and better. It can reduce frequent updates, repeated function calls, multiple network requests, multiple order submissions, etc. Another important role is that the interview may ask, we need to know.Copy the code

How to write?

The first parameter is the function we're going to execute and the second parameter is the timedebounce(func,delay) {  
  let timer=null
  return function (. args) {  
    if(timer) clearInterval(timer) // Check whether there is a timer left last time and delete it to avoid affecting the current timer
    timer=setTimeout(() = >{  / /... args,... It means we can pass multiple parameters
      func.apply(this,args)
    },delay)
  }
  // A closure is formed that refers to an external timer, which will not be destroyed} this kind of functional function, actually will use a lot of places, we can wrap it into a JS file, throughexport functionExport it, import it into a concrete use file and call the functionCopy the code

How to use?

Here’s the project

The case where the anti-shock debounce function is not used

this.$bus.$on('itemImgLoad'.() = > {
        this.$refs.scroll.refresh()   // It can be used as a refresh function.
        // But you don't need to refresh all the time, as long as you refresh at least once
      })
Copy the code

refresh() {
        this.srcoll && this.scroll.refresh()
        console.log(The '-')   // Print 30 times
      }
Copy the code

This enables communication between non-parent components via an event bus. We are listening for images loading, and there are 30 images, so we print 30 times

The case where the anti-shock debounce function is used

//const refresh = this.debounce(this.$refs.scroll.refresh)
const refresh = this.debounce(this.$refs.scroll.refresh, 50)
      this.$bus.$on('itemImgLoad'.() = > {
        refresh() 
      })
Copy the code

refresh() {
        this.srcoll && this.scroll.refresh()
        console.log(The '-')}Copy the code

As a result, the number of prints is reduced, depending on how quickly the data is loaded from the server

const refresh = this.debounce(this$refs.scrow.refresh) if I do not give time and then print, the number of times I print will be less than30It's a lot smaller. Because when we choose to usesetTimeoutIt's asynchronous, and whether it's written or not, it's slower than other programs that run directly, and I'll write an article about that latersetTimeoutThe summary of theCopy the code

conclusion

The anti – shake function is executed only once in a certain period of time

There’s actually a function called throttle, which I’ll write about next time. Here and here: Throttle back

Combined with Application Scenarios

1. Search box association: when users input values, they use functions to reduce the number of requests for data.

2. Add functions to the button to prevent the form from being submitted multiple times.

3. In order to make a particular function call, listen for the loading of picture elements or other elements, function shaking to reduce the number of function calls

4. There are more, but I haven’t met them yet

expand

SegmentFault: Function throttling and function stabilization

Nuggets: function throttling and function anti – shake