Hi, some friends will be asked to write the throttling function by hand during the interview , and many of them are stumped, baby, then you don’t understand the throttling function.
Today, let me take you to conquer it!
1. throttling
An event is triggered within a unit of time, and only one event callback is executed at most.
Human words: To put it bluntly, throttling is the skill CD, and skills can only be released after the CD is over.
2. Throttling case
Throttling case: When the mouse moves on the box, no matter how many times it moves, the +1 operation is performed only after 200ms.
3. use
3.1 Manual throttling
Core idea: use setTimeout to implement.
1. Declare a timer variable.
2. Every time the mouse slides, it is first judged whether there is a timer, and if there is, a new timer will not be started.
3. If there is no timer, start the timer and remember to save it in the variable
-- Execute event callback in the timer
--The timer should be cleared 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>
//引入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>Notice:
The method of clearing the timer inside the timer
//定时器内部清空定时器
//1.我们之前经常使用clearTimeout来进行定时器的清空，但是有个前提，我们都是在定时器外部来进行清空的，如果在定时器内部进行清空，是不会起作用的。
let timer=setTimeout(()=>{
clearTimeout('timer');//这里清除不起作用，程序还是会输出111
console.log("111");
},200)
//2.所以我们在定时器内部清空掉定时器会使用timer=null的方式。3.2 Using the lodash library
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. Throttling usage scenarios
1. High-frequency trigger event: mouseMove.
2. Page size scaling resize.
3. Page scroll bar scrolling: scroll.
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~~~~~~