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 ~~~~~~