博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
再谈javascript函数节流
阅读量:7102 次
发布时间:2019-06-28

本文共 1788 字,大约阅读时间需要 5 分钟。

之前写过但是不记得在哪了,今天同事要一个滑到页面底部加载更多内容的效果,又想起了这玩意儿,确实挺实用和常用的,谨此记之。

函数节流从字面上的意思就是节约函数的执行次数,其实现的主要思想是通过定时器阻断函数的连续执行,尤其适合用在频繁操作,比如window的resize和scroll事件等。

window的默认scroll事件间隔时间大概只有十几毫秒,如果频繁的scroll,然后去请求,然后渲染,对性能肯定有很大的影响。

大概模式:

var processor = {      timer: null,       performProcessing: function(){              // 要执行的代码      },       process: function(){          clearTimeout(this.timer);          this.timer= setTimeout(function(){              processor.performProcessing();          }, 100);      }  };   //调用  processor.process();
performProcessing是要频繁执行的函数,每次process会把之前的定时器timer给清除掉。简单来说,就是performProcessing每次会延迟100ms执行,如果在这段时间内又被执行,每次都会把前面的给clear掉,保证100ms内只会执行一次。 impress通过闭包实现的函数节流:
function throttle(fn, delay) {      var timer = null;      return function () {          var context = this, args = arguments;          clearTimeout(timer);          timer = setTimeout(function () {          fn.apply(context, args);      }, delay);    };  }

两种方法各有优劣,前一个封装函数的优势在把上下文变量当做函数参数,直接可以定制执行函数的this变量;后一个函数优势在于把延迟时间当做变量。

举个栗子:

    
Document

函数节流升级版

var throttleV2 = function(fn, delay, mustRunDelay){     var timer = null;     var t_start;     return function(){         var context = this, args = arguments, t_curr = +new Date();         clearTimeout(timer);         if(!t_start){             t_start = t_curr;         }         if(t_curr - t_start >= mustRunDelay){             fn.apply(context, args);             t_start = t_curr;         }         else {             timer = setTimeout(function(){                 fn.apply(context, args);             }, delay);         }     }; }; window.onresize = throttleV2(myFunc, 50, 100);

升级版的作用是myFun间隔50ms执行一次,100ms内必须执行,因为有可能你在50ms内使劲执行myFun,这个时候timer会被clear掉,就会导致事件永远不会执行,这是比较极端的情况。

 

转载于:https://www.cnblogs.com/hutuzhu/p/4905004.html

你可能感兴趣的文章
看一遍你也会做!用英伟达 DIGITS 进行图像分割(下)
查看>>
PC市场衰退:厂商酝酿大变局
查看>>
AC自动机
查看>>
智能家居下一个黄金十年在哪?
查看>>
新IT:催生教育新世界
查看>>
辽宁打造东北大数据产业中心
查看>>
【大数据播报】IT圈儿的“网红”究竟是谁?
查看>>
小巧省电高性能:中科创达用创新技术助力ROLLCAP云台相机上市
查看>>
微软兼并Linkedln的六大作用
查看>>
制造业ERP的核心:生产控制
查看>>
物联网智能技术引领互联网新风潮
查看>>
汇量科技1172万美元收购欧洲移动游戏数据分析公司
查看>>
深度融合信息化 视频监控打击震慑犯罪
查看>>
智能家居未来已来,可没做到这点便是“鸡肋”!
查看>>
北卡一号光伏电站全容并网
查看>>
欧盟向美社交网络发出通牒 限期一月修改服务条款否则罚款
查看>>
等等AMD!英特尔最新路线图曝10nm延期
查看>>
无线领军企业的5G之路
查看>>
Android应用自动化测试——理论、工具和实践(上)
查看>>
《Clojure数据分析秘笈》——1.9节从网页中抓取文本数据
查看>>