概念:限制一个函数在一定时间内只能执行一次。
举个栗子,坐火车或地铁,过安检的时候,在一定时间(例如10秒)内,只允许一个乘客通过安检入口,以配合安检人员完成安检工作。上例中,每10秒内,仅允许一位乘客通过,分析可知,“函数节流”的要点在于,在 一定时间 之内,限制 一个动作只执行一次。
二、为什么需要函数节流
前端开发过程中,有一些事件或者函数,会被频繁地触发(短时间按内多次触发),最常见的例如,onresize,scroll,mousemove ,mousehover 等,这些事件的触发频率很高,不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会造成计算机资源的浪费,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外,重复的 ajax 调用不仅可能会造成请求数据的混乱,还会造成网络拥塞,占用服务器带宽,增加服务器压力,显然这个问题也是需要解决的。
三、函数节流如何解决上述问题
根据上面对问题的分析,细细思索,问题的解决方案就呼之欲出了。
主要实现思路就是通过 setTimeout 定时器,通过设置延时时间,在第一次调用时,创建定时器,先设定一个变量true,写入需要执行的函数。第二次执行这个函数时,会判断变量是否true,是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false,函数会依次运行。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。
四、函数节流的代码实现
根据以上分析,我们对“函数节流”进行代码实现,如下:
(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 ”,鼠标在页面上移动,观察浏览器控制台的变化),自己运行代码体验后,自然会更深刻的理解 “函数节流” 。
五、函数节流的使用场景
到此为止,相信各位应该对函数节流有了一个比较详细的了解,那函数节流一般用在什么情况之下呢?
懒加载、滚动加载、加载更多或监听滚动条位置;
百度搜索框,搜索联想功能;
防止高频点击提交,防止表单重复提交;
目前遇到过的使用场景就是这些了,不过理解了原理,小伙伴可以把它运用在需要用到它的任何场合,提高代码质量。
总结
使用“函数节流”的主要目的,是为了优化程序性能,提高用户体验,不过最主要的为了节约计算机资源,推荐在合适的场合使用它,才能达到它应有的效果,切忌滥用哦!
此文是本人第一篇技术博客,前后参考查阅了很多资料,比较用心,希望对各位读者有所帮助,有不足之处或者疑问之处各位也可以在评论区指正或者提出。后续会推出更多内容,期待和各位小伙伴的更多交流。