函数节流详解

话术：

1. 概念：
   hello 大家好，我是田老师，今天给大家讲的问题是《函数节流》。
   其实大家没必要被”节流“这个词所束缚。我们应该理解它背后的更深层次的含义；
   比如： 我们小时候最爱玩的fps射击游戏。当我们按一下鼠标，就会发射一颗子弹，但是当我们一直按着鼠标，子弹也只会在相同的时间间隔内被射出。
   所以： 我们可以理解为，子弹射出的频率被节流函数进行了优化，才会间隔的射出。从而提高了有游戏性能。

接下来我们就可以给函数节流下定义了：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

一、什么是函数节流（throttle）

首先函数节流的概念是什么？

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

举个栗子：
接下来，我给大家举个栗子

个人理解 函数节流就是fps(射击)游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

二、为什么需要函数节流

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。

三、函数节流的代码实现

接下来看代码实现;

实现之前，我们先看效果，对比优化前后的差别。

首先看常规操作：
当鼠标在页面上移动，只要鼠标移动1像素，控制台就会打印一个随机数。

紧接着再看我们经过函数节流优化后的效果：

当鼠标在页面上移动，每隔1s时间，控制台才会打印一个随机数。

这样呢，就大大减少了函数执行的次数。

接下来的们来看代码怎么实现吧。

这里呢给大家准备了两种实现方式，管哪种写法，都运用了闭包的思想（时间变量长期驻扎内存）。
先看第一种：

（1）时间戳方案

总体可以归纳为5个步骤：

1. 定义初始时间
2. 获取最新时间
3. 最新时间减去初始时间是否大于时间间隔。
4. 执行事件函数。
5. 把最新时间赋值给初始时间

function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now(); 
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

再看二种：
（2）定时器方案

1. 在外层函数内声明定时器变量。
2. 判断定时器是否存在。
3. 若存在，说明等待间隔时间太短，我们什么也不做。
4. 若不存在，说明是第一次，或者上次已执行完毕。那么我们重新创建定时器，执行事件函数，执行后把定时器置为null。

function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));

四、函数节流的使用场景

到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？

• 1. 加载、滚动加载、加载更多或监听滚动条位置；
• 2. 百度搜索框，搜索联想功能；
• 3. 防止高频点击提交，防止表单重复提交；

目前遇到过的使用场景就是这些了，不过理解了原理，小伙伴可以把它运用在需要用到它的任何场合，以便提高代码质量，优化程序性能，提高用户体验。
最后，感谢大家倾听！我们下次再见！