Salut, certains amis seront invités à écrire la fonction de limitation à la main pendant l'entretien , et beaucoup d'entre eux sont perplexes, bébé, alors vous ne comprenez pas la fonction de limitation.

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

1. étranglement

Un événement est déclenché dans une unité de temps et un seul rappel d'événement est exécuté au maximum.

Mots humains : pour le dire franchement, la limitation est le CD de compétences, et les compétences ne peuvent être libérées qu'une fois le CD terminé.

2. Boîtier d'étranglement

Cas de limitation : Lorsque la souris se déplace sur la boîte, peu importe le nombre de fois qu'elle se déplace, l'opération +1 n'est effectuée qu'après 200 ms.

3. utiliser

3.1 Étranglement manuel

Idée centrale : utilisez setTimeout pour implémenter.

1. Déclarez une variable de temporisateur.

2. Chaque fois que la souris glisse, il est d'abord jugé s'il y a une minuterie, et s'il y en a une, une nouvelle minuterie ne sera pas démarrée.

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

-- Exécuter le rappel d'événement dans la minuterie

--La minuterie doit être effacée dans la minuterie

<!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>
//引入lodash库
 <script src='./lodash.js'></script>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function moveFn() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }

	//手写的节流函数
	function throttle(fn,time){
    	let timer=null;
        return function(){
            //先判断有没有定时器
            if(!timer){
                timer=setTimeout(function(){
                    fn();//执行事件的回调函数
                    timer=null;//清空定时器(此处为什么用null清空，见下方解释。PS:定时器内部清空定时器)
                },time)
            }
        }
	}

	//使用lodash的节流函数
    box.addEventListener('mousemove', throttle(moveFn, 200));//在200ms内，最多只执行一次+1事件回调。

  </script>
</body>

</html>

Avis:

La méthode d'effacement de la minuterie à l'intérieur de la minuterie

//定时器内部清空定时器
//1.我们之前经常使用clearTimeout来进行定时器的清空，但是有个前提，我们都是在定时器外部来进行清空的，如果在定时器内部进行清空，是不会起作用的。
let timer=setTimeout(()=>{
    clearTimeout('timer');//这里清除不起作用，程序还是会输出111
    console.log("111");
},200)

//2.所以我们在定时器内部清空掉定时器会使用timer=null的方式。

3.2 Utilisation de la bibliothèque lodash

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 de limitation

1. Evénement déclencheur haute fréquence : mouseMove.

2. Redimensionnement de la mise à l'échelle de la taille de la page.

3. Défilement de la barre de défilement de la page : faites défiler.

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 en profondeur - la limitation (et vous pouvez écrire à la main)