前端日常——节流

一、什么是节流

当持续触发事件时，在规定时间段内只调用一次回调函数。如果在规定时间内又触发了该事件，则什么都不做，也不重置定时器。

与防抖相比较：

防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次。一般不会重置定时器，即不会if(timer) clearTimeout(timer);（时间戳+定时器版除外）

二、应用场景

两个条件：

1、用户连续频繁地（事件触发的时间间隔比规定的时间要短）触发事件

2、用户不只关心“最后一次”操作后的结果反馈，而是在操作过程中的持续反馈。

如：鼠标不断点击触发，点击事件在规定时间内只触发一次（单位时间内只触发一次）；监听滚动事件，比如是否滑到底部加载更多，用throttle来判断。

三、原理

两种实现方式：

1、时间戳方式：通过闭包保存上一次的时间戳，然后与事件触发的时间戳比较，如果大于规定时间，则执行回调，否则就不作处理。特点：一般第一次会立即执行，之后连续频繁地触发事件，也是超过了规定时间才会执行一次。最后一次触发事件，也不会执行（因为如果你最后一次触发时间大于规定时间，这样就算不上连续触发了）。

2、定时器方式：原理与防抖类似，通过闭包保存上一次定时器状态，然后事件触发时，如果定时器为null（即代表此时间隔时间已经大于规定时间），则设置新的定时器，到时间后执行回调函数，并将定时器设置为null。特点：当第一次触发事件时，不会立即执行函数，到了规定时间后才会执行，之后连续频繁地触发事件，也是到了规定时间才会执行一次（因为定时器）。当最后一次停止触发后，由于定时器的延时，还会执行一次回调函数（是上一次成功触发执行的回调，而不是你最后一次触发产生的）。一句话总结就是延时回调，你能看到的回调都是上次成功触发产生的，而不是你此刻触发产生的。

这两种最大的区别是：时间戳版的函数触发是在规定时间开始的时候，而定时器的函数触发是在规定时间结束的时候。

四、代码实现

1、时间戳版：

2、定时器版：

3、时间戳+定时器版（实现第一次触发可以立即响应，结束触发也能有响应，该版才最符合实际工作要求）