javascript函數(shù)節(jié)流概念與用法實例詳解_javascript技巧

《javascript函數(shù)節(jié)流概念與用法實例詳解_javascript技巧》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、JavaScript函數(shù)節(jié)流概念與用法實例詳解本文實例講述了JavaScript函數(shù)節(jié)流概念與用法。分享給大家供大家參考，具體如下：最近在做網(wǎng)頁的時候冇個需求，就是瀏覽器窗口改變的時候需要改一些頁而元素大小，于是乎很自然的想到了window的resize事件,于是乎我是這么寫的n=0;functionresizehandle

2、r(){console.log(newDate().getTime());console.log(++n);1jwindow.onresize二resizehandler;功能倒是實現(xiàn)了，但是我拖拽的方式改變?yōu)g覽器窗口大小的時候看了下控制臺localhost+FamousQuotesdt&&._?MozldDeveloperNt%mottle09CAhJH用⑥E訂b■；wEIcnKnhResourcesMetworkSomceiTrmflineProfile!A

3、udcbConi^k46a■］上Cinde1383373272965C^nde47Cmde1383373272965Cindt48Cindc1383373273051Cadt49Edc1383373273052flndt50(mdt1383373273115Cindt51Cinde1385371273116Cinde52>(、ndein>Hqq▼▼57OEtfotsWatnmgiLogsDebug沒錯，簡單的一個拖拽讓我的resizeHandler()方法執(zhí)行了

4、52次，這完全不是我想耍的效果，實際上我的resizeHandlerO方法的代碼很復(fù)雜，其至?xí)褂胊jax向服務(wù)器發(fā)送請求，要是簡單的一次改變窗口大小就要調(diào)用52次這還了得函數(shù)節(jié)流其實我的本意只是窗口resize后頁而做一些調(diào)整就可以，jfljwindow的resize事件并不是在resize結(jié)束后才觸發(fā)的，具體則么個頻率我也不知道，但卻是在不停的調(diào)用，直到窗口大小不再變化。其實類似的機(jī)制述有鼠標(biāo)的mousemove,都是在短時間內(nèi)重復(fù)觸發(fā)。在《JavaScript高級程序設(shè)計》小有專門應(yīng)對此問題的函數(shù)節(jié)流

5、functionthrottle(method,context){clearTimeout(method,tld);method.tTd=setTimeout(function(){method.call(context);},500);原理很簡單，利用定時器，讓函數(shù)執(zhí)行延遲500毫秒，在500毫秒內(nèi)如果冇函數(shù)乂被調(diào)用則刪除上一次調(diào)用，這次調(diào)用500毫秒后執(zhí)行，如此往復(fù)。這樣我剛才的代碼可以改為

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);};拖拽一下試試，果真只執(zhí)行了一次

7、“_―D盧◎9Mobile21⑥設(shè)計1S式WebServerandASP...廬ThrottlexWCrtlocall-iL:應(yīng)用區(qū)■tfEElementsResourcesNetworkSourcesTimelineProfile5Audits*ConsoleX13833743159411(index):10Dndex):11(O>HQ0▼▼W€ErrorsWarnings農(nóng)另一種做法網(wǎng)上還有一種函數(shù)節(jié)流方案，它是這么做的functionthrottle(me

8、thod,delay){vartimor二null;returnfunction(){varcontext二this,args=arguments;clearTimeout(timer);timer二setTimeout(function(){method.apply(context,args);},delay);}}調(diào)用一下試試，-?樣的效果n二0;f