函数节流详解

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

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

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

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

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

二、为什么需要函数节流

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

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

三、函数节流如何解决上述问题

根据上面对问题的分析，细细思索，问题的解决方案就呼之欲出了。

主要实现思路就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量true，写入需要执行的函数。第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。

四、函数节流的代码实现

根据以上分析，我们对“函数节流”进行代码实现，如下：

当鼠标在页面上移动，只要鼠标移动了，我们就在控制台打印一个随机数。

常规方法:

function handle(){
    console.log(Math.random());
}

window.addEventListener(“mousemove”,handle);

（1）方法一：时间戳方案

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）方法二：定时器方案

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));

自己运行代码体验后，自然会更深刻的理解 “函数节流” 。

五、函数节流的使用场景

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

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

目前遇到过的使用场景就是这些了，不过理解了原理，小伙伴可以把它运用在需要用到它的任何场合，提高代码质量。

总结

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