防抖与节流

转载

mb600be85f1b06a 2021-01-23 18:58:58

文章标签 防抖节流 文章分类 前端开发

定义

防抖与节流_节流

在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(() => {//记录任务idfn(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;//减去时间看看差了多少，不满足时间直接returnfn(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))复制代码