你不知道的函数节流

什么是函数节流

概念：限制一个函数在一定时间内只能执行一次

举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在 一定时间 之内，限制 一个动作 只 执行一次 。

简单来说，节流就是稀释函数的调用或者说执行频率

函数节流的应用

为什么需要函数节流？？

某些情况下，浏览器的一些高频事件对于用户来说其实并没有太大必要，比如懒加载中的scroll事件。但是如果使用函数防抖的话，只有用户停止滚动后，才会判断是否到了页面底部；如果使用函数节流，只要页面滚动就会间隔一段时间判断一次，即保留了用户体验，又提升了执行速度，节省资源。

以上场景可能会用到函数节流：

- DOM 元素的拖拽（mousemove）

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

- Canvas 模拟画板功能（mousemove）

- 搜索联想（keyup）

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

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

函数节流的解决方案

根据上面的需求，稍加思索，其实原理跟函数防抖差不多，不了解函数防抖的小伙伴可以翻翻我上一篇帖子

利用延时器实现原理：提前定义容器变量用来保存setTimeout的返回值，在每次触发事件，准备开启新的setTimeout之前，先检查容器变量中是否保存有setTimeout的返回值，如果有，那么不再开启setTimeout，保证同一时间只有一个setTimeout存在。setTimeout执行完毕之后，手动清空容器变量的返回值。

话不多说，直接上代码

document.onmousemove = throttle(function(){
    console.log("函数调用");
})


// 函数节流
function throttle(callback,delay=1000){
    var timer = null;
    return function(){
        if(timer) return; //如果还有计时器，直接返回，什么都不做
        timer = setTimeout(() => {
            callback.call(this);
            timer = null;
        }, delay);
    }
}

以上就是利用seTimeout函数来实现函数节流，但值得注意的是，它会等一秒钟后才会触发，那还有没有其他方式来实现函数节流呢，接着往下看

利用时间戳实现原理：提前设定变量，准备存储事件结束后的时间戳，在事件开启之后，立即保存时间戳，并判断当前时间戳和事件结束后的时间戳的差值，决定是否需要执行本次事件。事件执行完毕之后，保存事件结束时的时间戳，以供下次开启事件时计算差值。

document.onmousemove = throttle(function(){
    console.log("函数调用")
})

function throttle(callback, delay=1000){
    let last = 0;
    return function(){
        var now = new Date().getTime(); //得到当前的时间
        if (now - last > delay) {
            callback.call(this);
            last = new Date().getTime();
        }
    }
}

使用“函数节流”的主要目的，是为了优化程序性能，提高用户体验，不过最主要的为了节约计算机资源，推荐在合适的场合使用它，才能达到它应有的效果，切忌滥用哦！

这就是函数节流的两种方式，通过setTimeout函数和时间戳来实现，如果还有不同的写法，欢迎大家留言评论区喔！