前言
在笔者之前的面试中,基本上每次都会被问到防抖和节流是什么意思,讲道理虽然对这个概念大致有一些理解,但是一直都有点模模糊糊的,所以在这里记录一下,以便回顾
防抖
概念:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
顾名思义,防抖就是防止抖动,简单的解释就是说任务执行的唯一性,就是说在一个任务执行之前,无论你下达多少次的命令,任务都只会执行一次,最比较常见的就是延时任务防抖实现,请看下面的示例
var time = null;
function handleClick() {//执行任务的函数
if(time != null) {
clearTimeout(time);
time = null;
}
time = setTimeout(() => {
//这里执行一个任务
},3000)
}
<button onclick="handleClick()">执行任务</buton>
//每次点击执行任务按钮之后,都会把之前的计时器清空,里面的任务也就不会执行,然后重新去建立一个任务,也就是任务的唯一实现
节流
概念:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
顾名思义,节流就是节约开支,简单的解释就是说在一定的时间内,无论我们怎么发布任务,任务也只会执行一次,当然,这个条件维度不一定是时间,也可以是其他的,比如滚动触发事件(只有滚动的距离达到一定的长度才会触发),请看示例
var time = null;
function handleClick() {//执行任务的函数
if(time != null) { return }
time = setTimeout(() => {
//这里执行一个任务
clearTimeout(time);
time = null;
},3000)
}
<button onclick="handleClick()">执行任务</buton>
总结:其实防抖和节流的区别就是维度不一样,一个是以执行次数为条件,一个是以时间间隔为条件,当然了,他们存在的目的都是为了提高我们的程序性能