This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Tremble throttling as a front end interview classic hand rip code question, master tremble and throttling is a front end developer’s engineering ability to reflect, will not encapsulate tremble and throttling? Let’s learn ~πŸ™†β™‚οΈ

Anti-skid (Debounce)

The basic concept

The callback is executed n seconds after the event is triggered. If the event is triggered again within n seconds, the time is re-timed.

An 🌰 son

This is a very common scenario in which an Ajax request is sent when we enter a keyword in the search box and then displayed in the list. Let’s simulate this scenario:

  <span>If you case</span>
  <input type="text">
Copy the code
    const input = document.querySelector('input')
    input.addEventListener('keyup'.function(){
    // Mock the Ajax request
      console.log(input.value);
    })
Copy the code

We can see that every time the user presses the keyboard, the Ajax request is sent. However, this is a waste of resources. We should wait a while before sending the Ajax request until the user has typed a character

    const input = document.querySelector('input')
    let timer = null
    input.addEventListener('keyup'.function(){
      if(timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() = >{
        // Mock the Ajax request
        console.log(input.value);
        // Clear the timer
        timer = null
      },500)})Copy the code

As we can see from the demonstration, when you are typing frequently, the request is not sent, and only when you have no input within 500ms, the function is executed. If you stop typing but enter again within a specified interval, the timing is retriggered. That’s how we get our anti-shake function

Tremble is like a hero reading a skill when he releases it. If he uses it again before the skill is finished, he will read the skill again.

Encapsulate the shockproof function

If there are multiple input fields that need to be stabilized, we should not implement the stabilization function again. We should encapsulate a stabilization function and call it when we need to use it. Let’s try it

    // Encapsulate the shockproof function
    function debounce(fn,delay = 500){
      let timer = null
      return function(){
        if(timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() = >{
          fn.apply(this.arguments)
          timer = null
        },delay)
      }
    }
    / / use
    input.addEventListener('keyup',debounce(function() {
      console.log(input.value);
    },500))
Copy the code

Throttle

The basic concept

Specifies that the function can only be fired once per unit time. If this function fires multiple times per unit time, only one will take effect.

An 🌰 son

When dragging an element, it is necessary to get the position of the element at any time. If there is no throttling, as long as the element is moved by 1 or even 1px, it will get the current position of the drag. This is very performance consuming and easy to cause a lag.Let’s optimize it and use the throttling to get the current element’s position every 500ms.

    const div1 = document.querySelector('div')
    let timer = null
    div1.addEventListener('drag'.function(e){
      if(timer) {
        return
      }
      timer = setTimeout(() = >{
        console.log(e.offsetX,e.offsetY);
        timer = null
      },500)})Copy the code

So we have our throttling operation done, see the effect ~

Throttling is like playing chicken, even if you slam the fire button, the bullet will only fire at a predetermined speed, which makes sense.

Encapsulated throttling function

    // Encapsulate throttles
    function throttle(fn,delay = 500) {
      let timer = null
      return function() {
        if(timer) {
          return
        }
        timer = setTimeout(() = >{
          fn.apply(this.arguments)
          timer = null
        },delay)
      }
    }
    / / use
    div1.addEventListener('drag',throttle(function(e){
      console.log(e.offsetX,e.offsetY);
    },500))
Copy the code

The last

⚽ This article introduces the concept of shockless throttling in performance optimization and how to use ~ ⚾ If this article helped you, please like it ~ πŸ€GitHub blog github.com/Awu1227. πŸ‰ I have other columns, welcome to read ~ 🏐 Playing with the Beauty of CSS 🎱Vue from giving up to getting Started 🎳 Simple JavaScript