JavaScript节流函数Throttle详解

《JavaScript节流函数Throttle详解》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、在浏览器DOM事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove)。也就是说用户在触发这些浏览器操作的时候，如果脚木里面绑定了对应的事件处理方法，这个方法就不停的触发。这并不是我们想要的，因为有的时候如果事件处理方法比较庞人，DOM操作比如复杂，还不断的触发此类事件就会造成性能上的损失，导致用户体验下降(UI反映慢、浏览器卡死等)。所以通帘来讲我们会给相应事件添加延迟执行的逻辑。通常來说我们用卜•面的代码來实现这个功能：varCOUNT=0;functiontestF

2、n(){console.log(COUNT++)；}//浏览器resize的时候//1.清除之前的计时器//2.添加一个计时器让真正的函数testFn延后100毫秒触发window.onresize=function(){vartimer=null；clearTimeout(timer)；timer=setTimeout(function(){testFn()；},100);}；细心的同学会发现上面的代码其实是错课的，这是新手会犯的一个问题：setTimeout函数返I川值应该保存在一个相对全局变最里面，否则每次resize的时候都会产生一个新的计时器,这样就达不到我们

3、发的效果了于是我们修改了代码：vartimer=null；window.onresize=function(){clearTimeout(timer)；timer=setTimeout(function(){testFn()；},100);};这时候代码就正常了，但是又多了一个新问题——产生了一个全局变量timerc这是我们不想见到的，如果这个页面述有別的功能也叫timer不同的代码Z前就是产生冲突。为了解决这个问题我们要用JavaScript的一个语言特性：闭包closureso相关知识读者可以去MDN中了解，改造后的代码如下：/***函数节流方法*@paramFun

4、ctionfn延时调用函数*@paramNumberdelay延迟多长时间*@returnFunction延迟执行的方法*/varthrottle=function(fn#delay){vartimer=null；returnfunction(){clearTimeout(timer)；timer=setTimeout(function(){fn()；}/delay);}；window・onresize=throttle(testFn,200,1000)；我们用一个闭包函数(throttle节流)把timer放在内部并返回延时处理函数，这样以来timer变量对外是不可见

5、的，但是内部延时函数触发时还可以访问到timer变量。当然这种写法对于新手來说不好理解，我们口J以变换一种写法來理解一下：varthrottle=function(fn#delay){vartimer=null；returnfunction(){clearTimeout(timer)；timer=setTimeout(function(){fn()；}/delay);}};varf=throttle(testFn,200)；window.onresize=function(){f0;};这里主要了解一点：Throttle被调用后返回的function才是真正的onres

6、ize触发时需要调用的函数现在看起來这个方法已经接近完美了，然而实际使用中并非如此。举个例子：如果用户不断的resize浏览器窗口大小，这时延迟处理函数一次都不会执行于是我们又要添加一个功能：当用户触发resize的时候应该在某段时间内至少触发一次,既然是在某段时间内，那么这个判断条件就可以取当前的时间毫秒数，每次函数调川把当前的时间和上一次调用时间和减，然后判断差值如果大于某段时间就直接触发，否则还是走timeout的延迟逻辑。下面的代码里面需要指出的是:1.previous变量的作用和timer类似，都是记录上一次的标识，必须是相对的全局变量2.如果逻辑流程走的是“

7、至少触发一次"的逻辑，那么函数调用完成需要把previous重置成当询吋间，简单來说就是：相对于下一次的上一次其实就是当前/★★*函数节流方法*@paramFunctionfn延时调川函数*@paramNumberdelay延迟多长时间*@paramNumberatleast至少多长时间触发一次*@returnFunction延迟执彳亍的方法*/varthrottle=function(fn#delay,atleast){vartimer=null；varprevious=null；returnfunction(){varnow=+new