Throttling, anti – shake set to take away

Introduction to the

Throttling and anti-shaking are common topics in front-end interviews, which can greatly improve the performance of applications. But what exactly is throttling and anti-shaking? When is it used? And how to use it in Vue? Please follow the footsteps of the author to introduce you step by step.

Debounce

The so-called shake prevention means that the function is executed only once per unit time. If the event is triggered repeatedly within a unit time, the function execution time will be recalculated.

Anti – shake is divided into two types, including immediate and non-immediate versions.

Immediate release

The execute now version is usually used for button clicks (such as submitting a form), which trigger the click immediately, and do not trigger the click for a unit of time. Clicking again will trigger again when the time elapsed.

function debounce1(func, delay) {
  let timer = null
  return function() {
    const context = this
    const args = arguments
    if(timer) clearTimeout(timer)
    constcanCall = ! timer timer =setTimeout(() = > {
      timer = null
    }, delay)
    
    // if(canCall) func.apply(context, args)
    if(canCall) func.call(context, ... args) } }Copy the code

Not an immediate version

The non-immediate version can be used with a scroll event that is triggered after a unit of time, but not if you keep scrolling. Rescrolling is triggered again when the unit time is exceeded.

function debounce2(func, delay) {
  let timer = null
  return function() {
    const context = this
    const args = arguments
    if(timer) clearTimeout(timer)
    timer = setTimeout(() = > {
      //func.apply(context, args)func.call(context, ... args) },delay) } }Copy the code

Combination version

function debounce3(func, delay, immediate=true) {
  let timer = null
  return function() {
    const context = this
    const args = arguments
    if(timer) clearTimeout(timer)
    if(immediate) {
      constcanCall = ! timer timer =setTimeout(() = > {
        timer = null
      },delay)
      // if(canCall) func.apply(context, args)
      if(canCall) func.call(context, ... args) }else {
      timer = setTimeout(() = > {
        //func.apply(context, args)func.call(context, ... args) },delay) } } }Copy the code

Throttle

Throttling means executing a function only once, no matter how many times the function is triggered per unit of time. Throttling reduces the frequency of function execution.

Throttling we usually use scenarios that only need to be executed once per unit of time, such as saving video playback progress, shooting bullets in the game, etc. If there are better scenarios, please add them in the comments section.

Throttles have timer versions and timestamp versions.

Timer version

function throttle1(func, delay) {
  let timer = null;
  return function () {
    const context = this;
    const args = arguments;
    if(! timer) { timer =setTimeout(() = > {
        timer = null;
        // func.apply(context, args);
        func.call(context, ...args);
      }, delay);
    }
  };
}
Copy the code

Timestamp version

function throttle2(func, delay) {
  let pre = 0;
  return function () {
    const context = this;
    const args = arguments;
    let now = Date.now();
    if (now - pre > delay) {
      pre = now;
      // func.apply(context, args);
      func.call(context, ...args);
    }
  };
}
Copy the code

Combination version

function throttle3(func, delay, timestamp=true) {
  let timer = null
  let pre = 0
  return function() {
    const context = this
    const args = arguments
    if(timestamp) {
      let now = Date.now()
      if(now - pre > delay) {
        pre = now
        //func.apply(context, args)func.call(context, ... args) } }else {
      if(! timer) { timer =setTimeout(() = > {
          timer = null;
          // func.apply(context, args);func.call(context, ... args); }, delay) } } } }Copy the code

Used in the Vue

Although many friends know about anti-shake and throttling, they do not know how to use throttling and anti-shake in Vue. The following author introduces two ways to use anti-shake and throttling in Vue.

Method 1

By means of external introduction.

Image stabilization

import { debounce } from "@/utils/index";
export default {
  mounted() {
    window.addEventListener("scroll".this.handleScroll);
  },
  methods: {
    handleScroll: debounce(function (e) {
      console.log(e);
    }, 1000),}};Copy the code

The throttle

import { throttle } from "@/utils/index";
export default {
  mounted() {
    window.addEventListener("scroll".this.handleScroll);
  },
  methods: {
    handleScroll: throttle(function (e) {
      console.log(e);
    }, 1000),}};Copy the code

Method 2

Write it in this document.

Image stabilization

  mounted() {
    window.addEventListener("scroll".this.debounce(this.handleScroll, 1000));
  },
  methods: {
    debounce(func, delay) {
      let timer = null;
      return function () {
        const context = this;
        const args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() = > {
          func.apply(context, args);
        }, delay);
      };
    },
    handleScroll(e) {
      console.log(e); }},Copy the code

The throttle

  mounted() {
    window.addEventListener("scroll".this.throttle(this.handleScroll, 1000));
  },
  methods: {
    throttle(func, delay) {
      let timer = null;
      return function () {
        const context = this;
        const args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() = > {
          func.apply(context, args);
        }, delay);
      };
    },
    handleScroll(e) {
      console.log(e); }},Copy the code

Afterword.

This article is the author’s personal study notes, if there are fallacies, please inform, thank you! If this article helped you, please give it a thumbs up