首页 > 代码库 > JS高阶函数应用——函数节流
JS高阶函数应用——函数节流
在一些函数需被频繁调用的场景,如:window.onresize、mousemove、上传进度等等,操作频繁导致
性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题。
比如我们在window.onresize事件中打印当前浏览器窗口的大小,而拉拽窗口的时候,打印窗口大小的
工作1s内进行了10次。而实际是我们只需2次或3次,这就需要我们按时间段来忽略一些事件请求,比如确保
在500ms内只打印1次。实现代码如下:
var throttle=function(fn,interval){ var _self=fn, //保存需要被延迟执行的函数引用 timer, //定时器 firstTime=true; //是否是第一次调用 return function(){ var args=arguments, _me=this; if(firstTime){ //如果是第一次调用,,则不需要延迟执行 _self.apply(_me,args); return firstTime=false; } if(timer){ //如果定时器还在,说明前一次延迟执行还没有完成 return false; } timer=setTimeout(function(){ //延迟500ms执行 clearTimeout(timer); timer=null; _self.apply(_me,args); },interval||500); } } window.onresize=throttle(function(){ console.log(1); },500);
JS高阶函数应用——函数节流
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。