Application of Anti shake and Throttle in vue

Directory preface concept anti-shake
Define usage scenario code
Use in vue
Throttling
Define usage scenario code
Used in vue
Summarize

Preface

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

At this time, I don't want to save the current position as long as I slide 1 point at a time. I want to save it once every 1 period of time. At this time, I can use anti-shake and throttling.

Concept

To put it bluntly, anti-shake throttling is to use timers to achieve our goals.

Anti-shake (debounce):

The callback is executed after the event is triggered for n seconds, and if it is triggered again within this n second, it is timed again.

A typical case is the input box search: after the input is finished, the search request will be made in n seconds, and the content entered within n seconds will be re-timed.

Throttling (throttle):

It is stipulated that the function can only be triggered once in 1 unit time. If the function is triggered multiple times in this unit time, it will only take effect once.

A typical case is triggered by continuous mouse clicks, which only takes effect once for multiple clicks within n seconds.

Anti-shake

Definition

Frequent operation prevents jitter. Event will be triggered only if no operation is performed within n seconds after operation. If operation is continued, time will be re-timed

Usage scenario

Input box input Zoom resize

Code

// utils.js
// immediate  Do you want to start immediate execution 
function 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)
    }
}

Used in vue

Method 1: Introduced in the public method utils

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 operation dilution function is executed. When frequent operation occurs, it is triggered once every n second

Usage scenario

Mouse click, mousedown, mousemove unit time is only executed once Scroll Event, Lazy Load, Scroll Load, Load More, or Monitor Scroll Bar Position Prevent high-frequency click submission and prevent repeated submission of forms

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

Use the same method as anti-shake

Summarize