防抖与节流

定义

在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界面等高优先级的事情让它去做。

多思考，多写写。两者还是很容易区别的~