js防抖和节流
创始人
2025-05-29 13:35:48

1、防抖

防抖:单位时间内，频繁触发事件，只执行最后一次
举个栗子:王者荣耀回城，只要被打断就需要重新来

使用场景:
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测

在这里插入图片描述
手写防抖
防抖的核心就是利用定时器(setTimeout)来实现
0:声明一个定时器变量
2: 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
3:如果没有定时器则开启定时器，记得存到变量里面
4:在定时器里面调用要执行的函数

const div1 = document.querySelector('div:nth-child(2)');
const p1 = document.querySelector('.p2');
let i1 = 0;
function mouseMove1() {i1++;p1.innerHTML = i1;
}function debounce(fn, t) {let timer;// return一个匿名函数return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(function () {fn();}, t)}
}
div1.addEventListener('mousemove', debounce(mouseMove1, 500))

2、节流

节流:单位时间内，频繁触发事件，只执行一次
举个栗子:
王者荣耀技能冷却，期间无法续释放技能
和平精英98k 换子弹期间不能射击