目录
- 1.防抖
- 1.1.封装防抖函数
- 1.2.lodash防抖
- 2.节流
- 2.1.封装节流函数
- 2.1.lodash节流
- 3.区别
1.防抖
单位时间内，频繁触发事件，只执行最后一次（从头开始执行）
执行下面代码，只要鼠标在盒子上移动时，盒子数字快速增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', mouseMove)
</script>
</body>
</html>
但在更多时候，我们想让盒子从一处移动到另外一处，只会增加一次。
1.1.封装防抖函数
思路：
- 声明一个定时器变量
- 当鼠标每次滑动都判断是否有定时器，如果有定时器，先清除以前定时器
- 如果没有定时器，则开一个定时器
- 在定时器里面调用要执行的函数
实现：
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
function debounce(fn, t) {
// 1.声明一个定时器变量
let timer
return function () {
// 2.如果有定时器，先清除定时器
if (timer) clearTimeout(timer)
// 3.4.重新设置定时函数
timer = setTimeout(fn, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 200))
解释：
- 这里比较难以理解的是为什么要return一个函数，其实这和我们要封装的 debounce()函数的用法有关
- 平常我一般会写一个函数在
mousemove后后面，例如：
box.addEventListener('mousemove', function(){})
- 这样写我们其实是在这里定义了一个函数，而并没有调用这个函数，而是
mousemove事件触发后再调用 - 但是我们要封装的 debounce()函数使用时是以调用的写法写入，在写入后，没有触发
mousemove事件便会调用，而触发mousemove事件却不会调用。 - 而我们加入return并返回函数后，return外的函数在解析完代码时就已经执行，触发
mousemove事件后，调用的是return返回的函数。
上面的解释可能比较难懂，以下我来用代码演示以下执行过程吧（如果看不懂上面可直接跳到此处）
- 代码解析后会执行：
// 1.声明一个定时器变量
let timer
- 触发
mousemove事件后，执行return返回的函数：
box.addEventListener('mousemove', function () {
// 2.如果有定时器，先清除定时器
if (timer) clearTimeout(timer)
// 3.重新设置定时函数
timer = setTimeout(mouseMove, 200)
})
1.2.lodash防抖
lodash防抖函数：
语法：
_.debounce(要执行的函数, 延后执行的时间)
<!-- 在使用时我已经将lodash的js文件下载到了本地 -->
<script src="../lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.debounce(mouseMove, 200))
</script>
- 将上面的代码运行，则当鼠标在盒子上移动时，盒子里的数字不会增加
- 当鼠标在盒子移动并悬停超过200毫秒时（或者鼠标移出盒子），盒子里的数字增加
2.节流
2.1.封装节流函数
思路：
- 声明一个定时器变量
- 当鼠标每次滑动都判断是否有定时器，如果有定时器已经开启，则不做操作
- 如果没有定时器，则开一个定时器
- 定时器到达时间，清空定时器
实现：
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
function debounce(fn, t) {
// 1.声明一个空定时器变量
let timer = null
return function () {
// 2.如果没有定时器，可以设置定时器
if (!timer) {
timer = setTimeout(function () {
fn()
// 4.冷却完，清空定时器
timer = null
}, t)
}
// 3.如果已经有定时器，不做操作
}
}
box.addEventListener('mousemove', debounce(mouseMove, 3000))
封装节流函数的思路与封装防抖函数思路相同，这里就不过多赘述。
代码改进：
- 值得一提的是，在测试这个代码时，我发现上面代码与lodash里面封装的节流函数有一定区别：我们上面封装的节流函数在第一次进入时盒子需要等3秒钟盒子数字才改变，而lodash封装函数第一次进入盒子，数字立马改变。
- 出现这个问题是，我们先调用函数，再定时；而在实际应用中，顺序恰恰应该相反。
- 其实还原lodash效果很简单，改一下if里的函数调用位置即可：
if (!timer) {
fn()
timer = setTimeout(function () {
// 4.冷却完，清空定时器
timer = null
}, t)
}
2.1.lodash节流
<!-- 在使用时我已经将lodash的js文件下载到了本地 -->
<script src="../lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.throttle(mouseMove, 3000))
</script>
- 将上面的代码运行，当鼠标在盒子上移动时，数字会增加
- 但3秒之内移动，数字不会再增加（3秒冷却）
3.区别
防抖是多次触发执行
最后一个，节流是多次触发执行第一个
- 防抖 => 回城
- 节流 => 技能冷却
