函数节流和函数防抖

这篇文章来说一下两个相似又不同的的概念,这是一个新手几乎不会注意到,但是却很重要的问题,函数的节流和防抖。下面先来看一看它们究竟是什么。

首先要知道,函数节流和防抖的最终目的都是为了限制函数调用次数。当函数执行频率达到一定限度时候,再增加频率是没有意义的,此时我们就需要限制函数的执行频率,不能白白的浪费性能,甚至还会因此造成卡顿等等超出预期的情况。

函数节流和函数防抖利用的是两种不同的思想,它们使用的业务场景不尽相同,下面来具体看一下。

函数节流(throttle)

函数节流指的是让函数在一定时间内只执行一次,这样就极大限制了函数的执行次数。比如我们要监听滚屏或窗口大小调整事件,其实是没有必要每滚动一点点就执行函数的,我们完全可以减少监听次数,此时就需要函数节流。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};

函数节流的实现方式非常类似于加锁的效果,我们采用一个变量作为标记,当一个函数进入执行时,把标记置为不可用,接下来的函数就无法进入执行了,等到函数执行完毕再放开信号,下一次才可以进入。通过借助setTimeout可以实现超时执行的效果,从而限制了函数的执行频率。

函数防抖(debounce)

函数防抖和函数节流的目的不同,函数防抖一个典型的应用场景就是用户输入校验,用户在一定要等到用户输入完成校验才会有意义,而不是用户每输入一个字符就校验一次。

1
2
3
4
5
6
7
8
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};

函数防抖利用了setTimeout的缓存效果,每次创建一个定时器,把函数放在定时器里面执行,在这个过程中,一旦函数再次被调用,就会首先清除已有定时器,这样未执行的函数就无效了,最多只能有最后一个函数处于待执行状态,于是就实现了只执行最后一次的效果。

函数节流和函数防抖的概念并不复杂,但是在实现性能优化上有很重要的作用,常用的工具库如lodash等也都有函数节流和函数防抖的相关实现。

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!