javascript函数节流概念与用法实例详解_javascript技巧

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

1、JavaScript函数节流概念与用法实例详解本文实例讲述了JavaScript函数节流概念与用法。分享给大家供大家参考，具体如下：最近在做网页的时候冇个需求，就是浏览器窗口改变的时候需要改一些页而元素大小，于是乎很自然的想到了window的resize事件,于是乎我是这么写的n=0;functionresizehandle

2、r(){console.log(newDate().getTime());console.log(++n);1jwindow.onresize二resizehandler;功能倒是实现了，但是我拖拽的方式改变浏览器窗口大小的时候看了下控制台localhost+FamousQuotesdt&&._•MozldDeveloperNt%mottle09CAhJH用⑥E訂b■；wEIcnKnhResourcesMetworkSomceiTrmflineProfile!A

3、udcbConi^k46a■］上Cinde1383373272965C^nde47Cmde1383373272965Cindt48Cindc1383373273051Cadt49Edc1383373273052flndt50(mdt1383373273115Cindt51Cinde1385371273116Cinde52>(、ndein>Hqq▼▼57OEtfotsWatnmgiLogsDebug没错，简单的一个拖拽让我的resizeHandler()方法执行了

4、52次，这完全不是我想耍的效果，实际上我的resizeHandlerO方法的代码很复杂，其至会使用ajax向服务器发送请求，要是简单的一次改变窗口大小就要调用52次这还了得函数节流其实我的本意只是窗口resize后页而做一些调整就可以，jfljwindow的resize事件并不是在resize结束后才触发的，具体则么个频率我也不知道，但却是在不停的调用，直到窗口大小不再变化。其实类似的机制述有鼠标的mousemove,都是在短时间内重复触发。在《JavaScript高级程序设计》小有专门应对此问题的函数节流

5、functionthrottle(method,context){clearTimeout(method,tld);method.tTd=setTimeout(function(){method.call(context);},500);原理很简单，利用定时器，让函数执行延迟500毫秒，在500毫秒内如果冇函数乂被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。这样我刚才的代码可以改为

6、{console,log(newDate().getTime());console.log(++n);}functionthrottle(method,context){clearTimeout(method,tld);method.tld^setTimeout(function(){method,cal1(context);},500);}window.onresize=function(){throttle(resizehandler,window);};拖拽一下试试，果真只执行了一次

7、“_―D卢◎9Mobile21⑥设计1S式WebServerandASP...廬ThrottlexWCrtlocall-iL:应用區■tfEElementsResourcesNetworkSourcesTimelineProfile5Audits*ConsoleX13833743159411(index):10Dndex):11(O>HQ0▼▼W€ErrorsWarnings农另一种做法网上还有一种函数节流方案，它是这么做的functionthrottle(me

8、thod,delay){vartimor二null;returnfunction(){varcontext二this,args=arguments;clearTimeout(timer);timer二setTimeout(function(){method.apply(context,args);},delay);}}调用一下试试，-•样的效果n二0;f