如何讲清楚函数节流？

拼搏现实的明天。 2022-11-26 08:43 167阅读 0赞

## 什么是节流？ ##

> **幼儿园所有的小朋友每天都要做3件事：**  
> **吃饭、睡觉、打豆豆。**  
> **只有一个小朋友例外，他的名字叫豆豆。**  
> **后来，有一位善良勇敢的小朋友站出来说：**  
> **你们不能这样打他了，这么打下去，会把他打死的**  
> **那我们以后就只能吃饭睡觉了！！**  
> **所以从现在开始，我们每隔72小时，只能打1次豆豆**  
> **于是大家都纷纷表示赞同并流出了感动的泪水**

**豆豆挨打的频率被降低了，这就叫节流。**

**列举一个实际的应用场景**

![format_png][]

一般情况下，当网页向下滑动的距离越来越长的时候

在右下角会出现一个回到顶部的按钮。

它的实现非常的简单

window.onscroll = functiion(){
         if(页面滚动距离 > 800) 显示按钮
         else 隐藏按钮
    }

然而你很快就发现了这段程序的逻辑问题

那就是，scroll这种滚动事件的触发频率是非常高的

只要在页面上稍微滚动一下

就会连续触发十几甚至二十几次事件

每一次我们都需要重新计算页面滚动距离，做判断，显示按钮等操作

显然我们对该事件的触发频率不需要那么高

200ms一次似乎已经足够了。

于是，我们开始动手写代码。

**函数节流（未优化版本）**

var lasttime = 0;
    window.onscroll = function(){
       var now = new Date().getTime(); //每次触发事件获取当前时间
       if( now-lasttime > 200 ){ //若时间间隔大于了200ms 
           lasttime = now;  //执行代码，并重新计时
           //你的代码
       }
    }

如果你**仔细的**阅读了上面的代码，依然不能理解节流原理

## 我还有张原理图给你看 ##

![format_png 1][]

## **总结：** ##

> 用节流的方式，可以保证在一段时间内，只有第一次执行是生效的  
> 直到超过了设定的时间段，才有机会执行下一次  
> 大大的降低了原有函数的执行频率  
> 顾名思义， **函数节流。**

**回过头来，我们再看代码**

var lasttime = 0; 
    window.onscroll = function(){
       var now = new Date().getTime(); //每次触发事件获取当前时间
       if( now-lasttime > 200 ){ //若时间间隔大于了200ms 
           lasttime = now;  //执行代码，并重新计时
           //你的代码
       }
    }

最后，参考[函数防抖][Link 1]，再来做一点优化吧

## 关于函数节流的应用场景，给大家列举一下，仅供参考 ##

\- DOM 元素的拖拽（mousemove）

\- 射击游戏在单位时间只能发射一颗子弹（mousedown/keydown）

\- Canvas 模拟画板功能（mousemove）

\- 懒加载，在滚动过程中判断是否需要加载图片（scroll）

\- 页面滚动到底部加载更多（scroll）

以上，如有纰漏或不同观点，欢迎留言讨论...

[format_png]: /images/20221124/b0eb6240f29f4e288c7e4925e876b1ae.png
[format_png 1]: /images/20221124/e1af71ddfa224e889c6a16322f116ecc.png
[Link 1]: https://zhuanlan.zhihu.com/p/110733457