防抖（debounce）
防抖: 单位时间内，频繁触发事件，只执行最后一次
举个栗子：王者荣耀回城，只要被打断就需要重新来
使用场景：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
写防抖函数
核心思路：
防抖的核心就是利用定时器 (setTimeout) 来实现
①：声明一个定时器变量
②: 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
③：如果没有定时器则开启定时器，记得存到变量里面
④：在定时器里面调用要执行的函数
<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>防抖函数实现</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/lodash.min.js"></script>
<script>
// 利用防抖实现性能优化
//需求： 鼠标在盒子上移动，里面的数字就会变化 + 1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
// 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
}
// box.addEventListener('mousemove', _.debounce(mouseMove, 500))
// 手写防抖函数
// 核心是利用 setTimeout定时器来实现
// 1. 声明定时器变量
// 2. 每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
// 3. 如果没有定时器，则开启定时器，存入到定时器变量里面
// 4. 定时器里面写函数调用
function debounce(fn, t) {
let timer
// return 返回一个匿名函数
return function () {
// 2.3.4
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fn() // 加小括号调用 fn函数
}, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))
// debounce(mouseMove, 500) // 调用函数
// debounce(mouseMove, 500) = function () { 2.3.4}
</script>
</body>
</html>
