(O)JS高阶函数应用——函数节流
在一些函数需被频繁调用的场景,如:window.onresize、mousemove、scroll滚动事件、上传进度等等,操作频繁导致
性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题。
比如我们在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);
posted on 2017-04-16 19:16 jacksplwxy 阅读(338) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步