Hi, some friends will be asked to write the anti-shake function by hand during the interview, and many of them are stumped, baby, then you don’t understand the anti-shake function.

Today, let me take you to conquer it!

1. Anti-shake

Anti-shake: Events are frequently triggered per unit time, and only the last time is executed.

Human words: To put it bluntly, anti-shake is to return to the city, and it will be recalculated after being interrupted.

2. Anti-shake case

We use a case to explain the anti-shake:

Functional goal: the mouse slides over the box, and it takes 500s before the number in the box is +1

3. Two ways to use anti-shake

3.1 Handwriting anti-shake

Core ideas:

1. The core of anti-shake is to use the timer (setTimeout to achieve)

2. When the mouse slides every time, first judge whether there is a timer, and if so, clear the previous timer first.

3. If there is no timer, start the timer and remember to store it in the variable.

4. Call the function to be executed in the timer.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // 手写的防抖函数
    function debounce(fn, t) {
      let timeId
      return function () {
        // 如果有定时器就清除
        if (timeId) clearTimeout(timeId)
        // 开启定时器 200
        timeId = setTimeout(function () {
          fn()
        }, t)
      }
    }
    // box.addEventListener('mousemove', mouseMove)
    box.addEventListener('mousemove', debounce(mouseMove, 200))

  </script>
</body>

</html>


//核心分析:
1.return一个函数的目的：
  如果没有return一个函数的时候,当页面一加载的时候就会立即执行addEventListener中的debounce,这样以后再触发事件的时候就不会再执行addEventListene事件的回调函数了。
  如果有return一个函数的时候,那么页面一上来调用debounce后就会返回一个function,那么每次执行mousemove后就会触发这个回调函数，这样就能保证每次触发事件后，回调函数也触发。
2.防抖的核心就是重新计时，所以先判断是否有定时器，有了就清除。然后开启一个定时器，在延时时间到了以后再触发fn();

3.2 lodash.js

1. Install lodash.js

cnpm i lodash --save

2. Introduce lodash

import _ from 'lodash'

3. Use (in vue3)

<div @mousemove='moveFn'></div>


let moveFn=_.debounce(()=>{
    console.log("事件触发200ms后会打印");
},200)

4. Anti-shake usage scenarios

1. Input in the search box: Enter a keyword in the search box, and you don’t want to request the server without entering one, so you can make a server request after inputting it.

2. Mobile phone number and email input detection.

Hurry up and practice, brother dei, if you don't practice, you will be useless!

Remember to support me, okay, I wish you good things in pairs~~~~~~

An article allows you to thoroughly learn - anti-shake (and you can write by hand)