大綱

一、出現緣由

二、什么是防抖debounce和節流throttle

三、應用場景

3.1防抖

3.2節流

一、出現緣由

前端開發中，有一部分用戶行為會頻繁觸發事件，而對于DOM操作，資源加載等耗費性能的處理，很可能導致卡頓，甚至瀏覽器崩潰，防抖和節流就是為了這一類的問題出現的前端優化技術。

二、什么是防抖debounce和節流throttle

防抖debounce是函數在規定延遲時間內不被調用，才能再次被調用，如果在規定時間內調用，延遲重新開始計算；

節流throttle是在規定的延遲時間間隔后，函數才執行一次，以固定的頻率被觸發。

三、簡單實現

3.1防抖

連續觸發事件的時候，不會有任何反應，停止觸發事件的多少秒，就會執行，在延遲時間內執行函數，就重新開始一個定時器。

?

function debounce(func,delay=300,timer=null){return (...args){clearTimeout(timer);timer=setTimeout(func.bind(null,...args,delay);)} } function query(){//ajax } input.addEventListener('keyup',debounce(query))

?

　　

?

3.2節流

觸發事件的時候，執行一個函數，在之后的一段時間內進這個函數，會被return，真正的邏輯不能執行，定時器在一定時間后重置開關，再進來就能再次執行真正的邏輯了。

?

function throttle(func,delay=60){let lock=false;return (...args)=>{if(lock)reutrn;function(..args);lock=true;setTimeout(()=>lock=false,delay);} } function query(){//ajax } decument.addEventListener('scroll',throttle(query));

?

　　

?

四、應用場景

3.1防抖throttle的應用場景

防抖適用于window.onscroll事件，等到拉動動作結束后再觸發一個事件，或者拖拽

?

_.throttle=function(func,wait,options){var context,args,result;var timeout=null;var previous0;if(!options)options={}var later=function(){previous=options.leading===false:0:new Date();timeout=null;result=func.apply(context,args);if(!timeout)context=args=null;}return fucntion(){var now=new Date();if(!previous && option.leading===false)previous=now;var remaining=wait-(now-previous);context=this;args=arguments;if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);timeout = null;}previous = now;result = func.apply(context, args);if (!timeout) context = args = null;} else if (!timeout && options.trailing !== false) {timeout = setTimeout(later, remaining);}return result;}}

?

　　

?

3.2節流throttle的應用場景

下面具體講一個例子

假設我們網站有一個搜索框，用戶輸入文本我們自動會聯想匹配除一些結果供用戶選擇，我首先想到的做法是監聽keypress事件或change事件，然后ajax請求數據，但是當用戶快速輸入的時候，就會瞬間觸發一連串的請求，這無疑不是我們想要的，我們想要的是用戶停止輸入的時候才去觸發查詢的請求，這時候函數防抖可以幫助我們。

?

_.throttle=function(func,wait,immediate){var timeout,args,context,timestamp,result;var later=function(){ //如果沒有超過等待時間，就接著設置一個定時器，時間是delay的時間減去方法執行的時間var last=new Date().getTime() - timestamp;if(last<wait && last>=0){timeout=setTimeout(later,wait-last);}else{ //如果已經過wait時間了，就直接清除定時器，給result賦值clearTimeout(timeout);if(!immediate){result=func.apply(context.args);if(!timeout)context=args=null;}}}return function(){context=this;args=arguments;timestamp=new Date().getTime();var callNow=immediate && timeout; //如果是立即執行或者之前執行過還沒過延遲時間if(!timeout)timeout=setTimeout(later,wait); //如果之前沒執行過，現在開始定時任務，如果執行過，timeout存在，就返回個空的result.if(callNow){ //如果是立即執行，就立即執行fn,這時候console.log(1);result=func.apply(context,args);context=args=null;}return result;}}function query(){//ajaxconsole.log('ajax');}$("#search").keypress(_.throttle(query,300));

?

　　

?

轉載于:https://www.cnblogs.com/learnings/p/9543782.html

總結

以上是生活随笔為你收集整理的防抖debounce和节流throttle的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。