本文主要是介绍防抖（debounce），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
防抖:单位时间内，频繁触发事件，只执行最后一次
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
现在有一个小栗子：鼠标在box中移动的时候，触发mouseMove事件，如果不防抖的话，每移动1像素就会调用mouseMove()函数，如果mouseMove()函数中存在大量操作dom等情况，会产生卡顿，这个时候我们考虑防抖：单位时间内，频繁触发mouseMove事件，只执行最后一次
实现方式:
1.lodash 提供的防抖来处理
<body><div class="box"></div><script src="./lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1 // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// lodash 防抖的写法box.addEventListener('mousemove', _.debounce(mouseMove, 500))</script>
</body>2.手写一个防抖函数来处理
防抖的核心就是利用定时器(setTimeout)来实现 :
- 声明一个定时器变量
- 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
- 如果没有定时器则开启定时器，记得存到变量里面
- 在定时器里面调用要执行的函数
<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 timeIdreturn function () {// 如果有定时器就清除if (timeId) clearTimeout(timeId)// 开启定时器 200timeId = setTimeout(function () {fn()}, t)}}// box.addEventListener('mousemove', mouseMove)box.addEventListener('mousemove', debounce(mouseMove, 200))</script>这篇关于防抖（debounce）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
