Salut, certains amis seront invités à écrire la fonction anti-shake à la main pendant l'entretien, et beaucoup d'entre eux sont perplexes, bébé, alors tu ne comprends pas la fonction anti-shake.

Aujourd'hui, laissez-moi vous emmener à sa conquête !

1. Anti-tremblement

Anti-shake : les événements sont fréquemment déclenchés par unité de temps, et seule la dernière fois est exécutée.

Paroles humaines : Pour le dire crûment, l'anti-shake consiste à revenir en ville, et il sera recalculé après avoir été interrompu.

2. Boîtier anti-tremblement

Nous utilisons un cas pour expliquer l'anti-tremblement :

Objectif fonctionnel : la souris glisse sur la case, et il faut 500s avant que le nombre dans la case soit +1

3. Deux façons d'utiliser l'anti-tremblement

3.1 Anti-tremblement d'écriture

Idées de base :

1. Le cœur de l'anti-shake consiste à utiliser la minuterie (setTimeout à atteindre)

2. Lorsque la souris glisse à chaque fois, jugez d'abord s'il y a une minuterie, et si c'est le cas, effacez d'abord la minuterie précédente.

3. S'il n'y a pas de minuterie, démarrez la minuterie et n'oubliez pas de la stocker dans la variable.

4. Appelez la fonction à exécuter dans le temporisateur.

<!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. Installez lodash.js

cnpm i lodash --save

2. Introduire le lodash

import _ from 'lodash'

3. Utilisation (en vue3)

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


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

4. Scénarios d'utilisation anti-tremblement

1. Saisissez dans la zone de recherche : saisissez un mot-clé dans la zone de recherche et vous ne souhaitez pas demander le serveur sans en saisir un. Vous pouvez donc effectuer une demande de serveur après l'avoir saisi.

2. Détection du numéro de téléphone portable et de l'entrée d'e-mail.

Dépêchez-vous et entraînez-vous, frère dei, si vous ne pratiquez pas, vous ne servirez à rien !

N'oubliez pas de me soutenir, d'accord, je vous souhaite de bonnes choses à deux ~~~~~~

Un article vous permet d'apprendre à fond - anti-shake (et vous pouvez écrire à la main)