JavaScript函数节流和函数防抖的区别

一、概念解释

功能节流和功能防抖，这两个都是高频优化js代码执行的手段。

大家大概都知道老式电视机的工作原理，就是要把屏幕上的颜色一行一行扫描，然后形成一个画面。因为肉眼只能分辨出某一频率的变化，所以人类在高频扫描时是感觉不到的。相反，它形成了一种视觉效果，即一幅画。就像风扇高速旋转，看不到扇叶，只看到一圈。

同样，它可以类比为js代码。在一定的时间内，代码执行的次数不需要很大。达到一定的频率就足够了。因为你跑得越多，就会带来同样的效果。最好将js代码的执行次数控制在合理的范围内。既能节省浏览器CPU资源，又能让页面浏览更流畅，不会因为js的执行而出现卡顿。这就是功能节流和功能防抖的作用。

函数节流是指js方法在一定时间内只运行一次。比如人眨眼睛，就是在一定时间内眨一次眼。这是对功能节流最生动的解释。

功能防抖是指频繁触发时，代码只执行一次，有足够的空闲时间。比如生活中乘坐公交车，就是说如果有人刷他的卡一个接一个地上车，司机就不会开车。只有别人不刷卡，司机才会开车。

二、功能节流

功能节流应用的实际场景大多用于监控页面元素的滚动事件。因为滚动事件是高频触发事件。以下是用于监控页面元素滚动的示例代码：

//函数节流var canRun=truedocument . getelementbyid(' throttle ')。onscroll=function(){ if(！CanRun){ //判断是否空闲，如果正在执行，直接返回return；} canRun=falsesettimeout(function(){ console . log(' function throttling ')；canRun=true}, 300);};函数节流的要点是声明一个变量作为标志来记录当前代码是否正在执行。

如果空闲，可以正常触发方法执行。

如果代码正在执行，请取消此方法的执行并直接返回。

这个方法的功能是监听ID为throttle的元素的滚动事件。

当canRun为真时，表示当前滚动事件是空闲的，可以使用。

传递级别if(！灿润)，等于拿到了通行证。那么下一步就是立即关闭检查点。canRun=false。这样，请求执行滚动事件的其他方法就会被阻止。

然后用setTimeout指定最小时间间隔300，然后执行setTimeout方法体中的内容。

最后，在setTimeout中的所有方法都被执行之后，检查点canRun=true被释放，以允许下一个访问者进入。

在该函数节流的实现形式中，需要注意的是执行间隔为=300ms。如果具体方法包含回调，也可以在回调中放canRun=true。了解功能节流的级别设置要点，其实改起来简单多了。

三、功能防抖

功能防抖最常见的应用场景是用户注册时的手机号验证和邮箱验证。只有用户输入完成后，前端才需要检查格式是否正确，如果不正确，会再次弹出提示。以下是滚动和收听页面元素进行分析的示例：

//功能防抖var定时器=falsedocument.getElementById('去抖')。onscroll=function(){ cleartime out(计时器)；//清除未执行的代码，重置回初始化状态timer=settimeout(function(){ console . log(' function anti-shake ')；}, 300);};函数节流的要点是它需要一个setTimeout来帮助实现。延迟需要运行的代码的执行。

如果方法被多次触发，用clearTimeout清除最后记录的延迟执行代码，然后重新开始。

如果计时结束，无法访问触发器，则执行代码。

此方法的功能是监听其标识为去抖元素的滚动事件

进入滚动事件方法体时，首先要做的是清除最后一个未执行的setTimeout。setTimeout的引用id由可变计时器记录。

ClearTimeout方法，该方法允许传入无效值。因此，这里可以直接执行clearTimeout。

然后，把要执行的代码放入setTimeout，然后返回setTimeout供定时器缓存引用。

如果倒计时300毫秒后没有新方法触发滚动事件，执行setTimeout中的代码。

函数防抖的关键点在于巧妙地使用setTimeout作为缓存池，可以轻松清除要执行的代码。

事实上，这种效果也可以通过队列来实现。这里不会很深。

第四，在线演示

这是我写的一个测试演示。将鼠标移到模块上，滚动滚轮，查看控制台上的输出效果。

演示地址：https://wall-wxk . github . io/blog demo/2017/02/15/throtterAnDebound . html

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！