定义
在JavaScript中，函数的防抖和节流不是什么新鲜话题，与之对应的文章也数不胜数，但是看再多都不如自己亲自做一遍，写一遍来的通透一些。本人在这之前对防抖和节流一直处于一个比较朦胧的印象，正好这次用到了，写下此文予以记录两者区别。
-
防抖效果
1秒内。只要有新的触发产生：从0开始计时。
-
节流效果
1秒内。只要有新的触发产生：无效，除非之前的操作执行完。
场景
说了这些，先来看看如何使用？假设我们有一个这样的场景需求：
我们需要监控页面的鼠标移动事件，会频繁的触发 mousemove ，而 mousemove 里面有着一些复杂的计算，我们假定事件里面需要进行 10 万次循环插入数组操作来模拟复杂计算。那么就会导致一个严重的性能问题。反反复复的进行计算，而实际上 mousemove 实在是太勤劳了，我们当中不需要那么“及时”的触发，否则可能会导致占用其他操作时间，例如我们的页面卡顿。于是我们需要引入防抖和节流。
先来看下我们即将进行的模拟复杂操作：
let arr = [];
for (let i = 0; i <= 100000; i++) {
arr.push(Math.random())
}
arr.sort((x, y) => y - x)
console.log(arr.join())
（多余的解读：随机生成10万的数字，从大到小排列，最后拼接输出）
可以看到计算是比较费时的，接下来我们先上代码，mousemove 下的展示：
function handle({
clientY,
clientX
}) {
let arr = [];
for (let i = 0; i <= 100000; i++) {
arr.push(Math.random())
}
arr.sort((x, y) => y - x)
console.log(arr.join())
document.body.innerText = `x:${clientY},y:${clientX}`
}
document.addEventListener('mousemove', handle)
解读：handle函数用于处理 mousemove 的操作，将鼠标的坐标显示到页面上。
可以发现现在页面已经有些卡顿了，我们接下来就借助防抖和节流来优化目前的页面体验。
防抖
代码：
function debounce(fn, time) {
let timer;//记录定时器
return function(event) {//返回一个新的函数
clearTimeout(timer)//如果又被触发了，清除上次的定时器
document.body.innerText = '鼠标停下展示结果'
timer = setTimeout(() => {//在下一次事件循环触发，并且记录定时器id，以用于需要清理的时候。
fn(event)
}, time)
}
}
document.addEventListener('mousemove', debounce(handle, 100))//传入handle函数，100毫秒后触发
页面上展示后可以发现：鼠标一直滑动的时候，页面没动静，但是一旦鼠标停下 100 毫秒以后开始显示内容。
节流
代码：
function throttle(fn, time) {
let flag = false;//设置标志位
return function(event) {
if (flag) return false;//如果标志位有定时器id，则说明之前有过任务，撤销本次任务。
flag = setTimeout(() => {//记录任务id
fn(event)
flag = false;//任务执行完毕，标志位还原
}, time)
}
}
document.addEventListener('mousemove', throttle(handle, 100))//传入handle函数，100毫秒后触发
页面上展示后可以发现：鼠标滑动的时候，页面也一直在计算，不过不管如何滑动，都会按照指定的时间频率来进行，不会大量触发。
当然实现防抖和节流未必只有我展示的方式，代码是灵活的，例如第二种throttle方式：
function throttle2(fn, time) {
let begin = new Date();//记录时间
return function(event) {
if (new Date() - begin < time) return false;//减去时间看看差了多少，不满足时间直接return
fn(event)
begin = new Date()//重置本次记录时间，以便于下次进行比对
}
}
回到开头的图
防抖和节流组合形式：
function throttle(fn, time, fn2, time2) {
let flag = false;//节流标志
let timer;//防抖定时器标志
return function(event) {
clearTimeout(timer)//清理防抖定时器
if (flag) return false;
flag = setTimeout(() => {
fn(event)//页面显示内容需要实时性比较强，不需要大量计算的ui更新放在这里进行
flag = false;
timer = setTimeout(() => {//延时执行复杂运算，鼠标不动的时候就可以有时间进行复杂运算更新。
fn2()
}, time2)
}, time)
}
}
function handle({
clientY,
clientX
}) {
document.body.innerText = `x:${clientY},y:${clientX}`
}
function handle2() {
let arr = [];
for (let i = 0; i <= 100000; i++) {
arr.push(Math.random())
}
arr.sort((x, y) => y - x)
console.log(arr.join())
}
document.addEventListener('mousemove', throttle(handle, 10, handle2,50))
- 以上代码便可很好的解决页面卡顿，鼠标移动同时，需要移动到某个地方进行一个大量计算。
总结
- 这里可以简单总结一下这个场景下防抖和节流的使用：
- 防抖：适合复杂运算的时候不要让它们过于频繁的执行，等页面“冷静”下来再去执行。
- 节流：必须要间隔固定时间执行一次，ui界面等高优先级的事情让它去做。
多思考，多写写。两者还是很容易区别的~
