How to use anti-shake and throttling in Vue

Preface

In a movie project, I want to save the current position of the drop-down in the movie list to prevent you from switching pages and then switching back to the current movie list page, which would cause it to return to the first piece of movie data.

At this time, I don’t want to save the current position every time I slide a little. I want to save it once every period of time. At this time, I can use anti-shake and throttling.

concept

To put it simply, anti-shake throttling is to use a timer to achieve our goal.

Debounce:

The callback is executed n seconds after the event is triggered. If it is triggered again within n seconds, the timing is restarted.

A typical example is input box search: the search request is made n seconds after the input is completed, and the time is reset if more content is input within n seconds.

Throttle:

It is stipulated that a function can only be triggered once within a unit of time. If a function is triggered multiple times within this unit of time, only one will take effect.

A typical case is that the mouse is continuously clicked to trigger, and it is stipulated that multiple clicks within n seconds will only take effect once.

Stabilization

definition

Frequent operations prevent jitter. If no operation is performed within n seconds after the operation, the event will be triggered. If the operation continues, the timing will be reset.

Usage scenarios

• Input box input
• Resize

Code

// utils.js
// immediate: whether to start executing function immediately debounce(func, delay = 300, immediate = false) {
    let timer = null
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        if (immediate && !timer) {
            func.apply(this, arguments)
        }
        timer = setTimeout(() => {
         func.apply(this, arguments)
        }, delay)
    }
}

Use in Vue

Method 1: Write it in the public method utils and introduce it

import { debounce } from 'utils'
methods: {
    appSearch:debounce(function(e.target.value){
        this.handleSearch(value)
    }, 1000),
    handleSearch(value) {
        console.log(value)
    }
}

Method 2: Write in the current vue file

data: () => {
  return {
    debounceInput: () => {}
  }
},
methods: {
  showApp(value) {
    console.log('value', value)
  },
  debounce(func, delay = 300, immediate = false) {
    let timer = null
    return function() {
        if (timer) {
            clearTimeout(timer)
        }
        if (immediate && !timer) {
            func.apply(this, arguments)
        }
        timer = setTimeout(() => {
         func.apply(this, arguments)
        }, delay)
    }
  }
},
mounted() {
  this.debounceInput = this.debounce(this.showApp, 1000)      
},

Throttling

definition

Frequent operations dilute the execution of the function. When frequent operations occur, it is triggered only once every n seconds.

Usage scenarios

1. Mouse click, mousedown, mousemove are executed only once per unit time
2. Scroll events, lazy loading, scroll loading, loading more or monitoring the scroll bar position
3. Prevent high-frequency click submission and repeated form submission

Code

// utils.js
function throttle (func, delay = 300) {    
    let prev = 0
    return function() {
        let now = Date.now()
        if ((now - prev) >= delay) {
            func.apply(this, arguments)
            prev = Date.now()
        }
    }
}

Use in Vue

The usage is the same as anti-shake

Summarize

This is the end of this article about the use of anti-shake and throttling in Vue. For more relevant content on the use of Vue anti-shake and throttling, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!