JS中的函数节流

JS中的函数节流

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

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

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

2、为何须要函数节流

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

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

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

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

主要实现思路就是经过 setTimeout 定时器，经过设置延时时间，在第一次调用时，建立定时器，写入须要执行的函数。第二次调用时，会清除前一个定时器并设置新的定时器。若是这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在必定的时间内，保证屡次函数的请求只执行最后一次调用。

4、函数节流的代码实现

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

（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("resize",throttle(handle,500));

（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("resize",throttle(handle,500));

以上两种方法本人都亲测有效哦，小伙伴们能够放心食用（注意，例子中函数触发方式为“ resize ”，改变窗口大小，观察浏览器控制台的变化）。

5、函数节流的使用场景

到此为止，相信各位应该对函数节流有了一个更深层次的了解，那函数节流通常用在什么状况之下呢？

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

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

总结

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

此文是本人第一篇技术博客，先后参考查阅了不少资料，比较用心，但愿对各位读者有所帮助，有不足之处或者疑问之处各位也能够在评论区指正或者提出。后续会推出更多内容，期待和各位小伙伴的更多交流。^o^