JavaScript节流函数Throttle详解_javascript技巧

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

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

2、來实现这个功能：varCOUNT=0;functiontestFn(){console.log(C0UNT++);}//浏览器resize的时候//1.清除之前的计时器//2.添加一个计时器让真正的函数testFn延后100毫秒触发window・onresize=function(){vartimer二null;clearTimeout(timer);timer=setTimeout(function(){testFn();},100);}；细心的同学会发现上而的代码其实是错误的，这是新手会犯的一个问题：setTimeout函数返回值应该保存在一个相

3、对全局变量里而，否则每次resize的时候都会产生一个新的计时器，这样就达不到我们发的效果了于是我们修改了代码:vartimer=null;window.onresize=function(){clearTimeout(timer);timer=setTimeout(function(){testFn();},100);}；这时候代码就正常了，但是又多了一个新问题一一产生了一个全局变量timero这是我们不想见到的，如果这个页面还有别的功能也叫timer不同的代码之前就是产生冲突。为了解决这个问题我们要用JavaScript的一个语言特性：闭包clo

4、sures。相关知识读者可以去MDN屮了解，改造后的代码如下：/***函数节流方法*©paramFunctionfn延时调用函数*@paramNumberdelay延迟多长时间*@returnFunction延迟执行的方法*/varthrottie=function(fn,delay){vartimer二null;returnfunction(){clcarTimcout(timer);timer=setTimeout(function(){fn();},delay);}}；window.onresize=throttle(testFn,200,10

5、00);我们用一个闭包函数(throttle节流)把timer放在内部并且返回延时处理函数，这样以來timer变量对外是不町见的，但是内部延时函数触发时还可以访问到timer变量。当然这种写法对于新手来说不好理解，我们可以变换一种写法来理解一下：varthrottle二function(fn,delay){vartimer=null;returnfunction(){clearTimeout(timer);timer=setTimeout(funclion(){fn();},delay);}}；varf=throttle(testFn,200);wi

6、ndow.onresize=function()fO;};这里主耍了解一点:throttle被调用后返回的function才是真正的onresize触发时需要调用的函数现在看起來这个方法已经接近完美了，然而实际使用中并非如此。举个例了：如果用户不断的resize浏览器窗口大小，这时延迟处理函数一次都不会执行于是我们又耍添加一个功能：当用户触发resize的吋候应该在某段时间内至少触发一次，既然是在某段时间内，那么这个判断条件就叮以取当前的时间毫秒数，每次函数调用把当前的时间和上一次调用时间相减，然后判断差值如果大于某段时间就直接触发，否则还是走tim

7、eout的延迟逻辑。下面的代码里面需要指出的是：1.previous变量的作用和timer类似，都是记录上一次的标识，必须是相对的全局变量2•如杲逻辑流程走的是“至少触发一次”的逻辑，那么函数调用完成需要把previous重置成当前时间，简单来说就是：相对于下一次的上一次其实就是当刖/***函数节流方法*@paramFunctionfn延时调用函数*©paramNumberdelay延迟多长时间*@paramNumberatleast至少多长吋间触发一次*@returnFunction延迟执行的方法*/varthrottle=function(fn,

8、delay,atleast){vartimer=null;varprevious二null;rcturnfu