JS进阶篇1---函数节流（throttle）

zhou_you 发布于2019-08-23 18:18 / 2471人阅读

摘要：主要实现思路就是通过定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。如果这时前一个定时器暂未执行，则将其替换为新的定时器。

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

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

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

二、为什么需要函数节流

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

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

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

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

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

四、函数节流的代码实现

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

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

以上两种方法本人都亲自测试过，小伙伴们可以放心食用（注意，例子中函数触发方式为“ mousemove ”，鼠标在页面上移动，观察浏览器控制台的变化），自己运行代码体验后，自然会更深刻的理解 “函数节流” 。

五、函数节流的使用场景

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

懒加载、滚动加载、加载更多或监听滚动条位置；

百度搜索框，搜索联想功能；

防止高频点击提交，防止表单重复提交；

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

总结

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

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

GPU云服务器云服务器 js函数节流进阶篇 webrtc进阶信令篇 webrtc进阶-信令篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104998.html

JS进阶篇--JS函数节流（throttle）

摘要：函数节流的原理函数节流的原理挺简单的，估计大家都想到了，那就是定时器。在高级程序设计一书有介绍函数节流，里面封装了这样一个函数节流函数，它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。什么是函数节流？介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱...

cpupro 2019-08-20 16:41 评论0 收藏0
JS进阶篇3---函数“节流” VS “防抖”

摘要：目的都是为了降低回调函数执行频率，节省计算机资源，优化性能，提升用户体验。函数防抖事件频繁触发的情况下，只有经过足够的空闲时间，才执行代码一次。函数节流和函数防抖的对比分析一、前言前端开发中，函数节流（throttle）和函数防抖（debounce）作为常用的性能优化方法，两者都是用于优化高频率执行 js 代码的手段，那具体它们有什么异同点呢？有对这两个概念不太了解的小伙伴...

hlcc 2019-08-23 18:21 评论0 收藏0
【进阶 6-3 期】深入浅出节流函数 throttle

摘要：引言上一节我们详细聊了聊高阶函数之柯里化，通过介绍其定义和三种柯里化应用，并在最后实现了一个通用的函数。第二种方案来实现也存在一个问题，因为定时器是延迟执行的，所以事件停止触发时必然会响应回调，所以时无法生效。引言上一节我们详细聊了聊高阶函数之柯里化，通过介绍其定义和三种柯里化应用，并在最后实现了一个通用的 currying 函数。这一小节会继续之前的篇幅聊聊函数节流 thrott...

baishancloud 2019-08-26 13:58 评论0 收藏0
Javascript 面试中经常被问到的三个问题！

摘要：相反，在讨论时，面试中通常会提到三件事。通过对事件对应的回调函数进行包裹以自由变量的形式缓存时间信息，最后用来控制事件的触发频率。而认为最后一个参赛者说了算，只要还能吃的，就重新设定新的定时器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！本...

PrototypeZ 2019-08-23 15:34 评论0 收藏0
【前端词典】5 种滚动吸顶实现方式的比较[性能升级版]

摘要：用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题，在微信浏览器某些版本中的值会为，于是乎也就有了第三种方案的兼容性写法。修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加...

happyfish 2019-05-23 17:31 评论0 收藏0