摘要:如果想忽略結尾邊界上的調用,傳入返回客戶調用函數上次執行時間點延遲執行函數若設定了開始邊界不執行選項,上次執行時間始終為首次執行時,如果設定了開始邊界不執行選項,將上次執行時間設定為當前時間。
文章轉自:https://blog.coding.net/blog/...
注: _.throttle 和 _.debounce是Underscore.js庫的兩個針對函數節流的方法,用于處理高頻率觸發的事件,是setTimeout的優化。
以此為契機,在以后的系列文章,會和大家一塊解讀underscope.js
Underscore.js是一個很精干的庫,壓縮后只有5.2KB。它提供了幾十種函數式編程的方法,彌補了標準庫的不足,大大方便了JavaScript的編程。
本文僅探討Underscore.js的兩個函數方法 _.throttle 和 _.debounce 的原理、效果和用途。
通常的函數(或方法)調用過程分為三個部分:請求、執行和響應。(文中“請求”與“調用”同義,“響應”與“返回”同義,為了更好的表述,刻意采用請求和響應的說法。)
某些場景下,比如響應鼠標移動或者窗口大小調整的事件,觸發頻率比較高。若稍處理函數微復雜,需要較多的運算執行時間,響應速度跟不上觸發頻率,往往會出現延遲,導致假死或者卡頓感。
在運算資源不夠的時候,最直觀的解決辦法就是升級硬件,誠然通過購買更好的硬件可以解決部分問題,但是也需要為此付出高額的成本。特別是客戶端和服務器模式,要求客戶端統一升級硬件基本不可能。
在資源有限的前提下,處理函數無法即時響應高頻調用。退而求其次,只響應部分請求是否可行呢?某些場景下的密集性請求,具備很強的同質和連續性。比如說,鼠標移動的軌跡參數。響應越及時效果越平滑,但是如果響應速度跟不上時,反而會出現卡頓感,如果適當的丟棄一些請求效果更流暢。
throttle 和 debounce不同之處:throttle 和 debounce 是解決請求和響應速度不匹配問題的兩個方案。二者的差異在于選擇不同的策略。
電梯超時
想象每天上班大廈底下的電梯。把電梯完成一次運送,類比為一次函數的執行和響應。假設電梯有兩種運行策略 throttle 和 debounce ,超時設定為15秒,不考慮容量限制。
throttle 策略的電梯。保證如果電梯第一個人進來后,15秒后準時運送一次,不等待。如果沒有人,則待機。
debounce 策略的電梯。如果電梯里有人進來,等待15秒。如果又人進來,15秒等待重新計時,直到15秒超時,開始運送。
使用示例
_.throttle 使用示例 function log( event ) { console.log( $(window).scrollTop(), event.timeStamp ); }; // 控制臺記錄窗口滾動事件,觸發頻率比你想象的要快 $(window).scroll( log ); // 控制臺記錄窗口滾動事件,每250ms最多觸發一次 $(window).scroll( _.throttle( log, 250 ) ); _.debounce 使用示例 function ajax_lookup( event ) { // 對輸入的內容$(this).val()執行 Ajax 查詢 }; // 字符輸入的頻率比你預想的要快,Ajax 請求來不及回復。 $("input:text").keyup( ajax_lookup ); // 當用戶停頓250毫秒以后才開始查找 $("input:text").keyup( _.debounce( ajax_lookup, 250 ) );underscore源碼注解
讓我們來讀讀源碼,探其究竟?;陂_發版本(1.7.0)的源碼,加上了一些注釋以幫助理解。
_.throttle方法源碼 /** * 頻率控制 返回函數連續調用時,func 執行頻率限定為 次 / wait * * @param {function} func 傳入函數 * @param {number} wait 表示時間窗口的間隔 * @param {object} options 如果想忽略開始邊界上的調用,傳入{leading: false}。 * 如果想忽略結尾邊界上的調用,傳入{trailing: false} * @return {function} 返回客戶調用函數 */ _.throttle = function(func, wait, options) { var context, args, result; var timeout = null; // 上次執行時間點 var previous = 0; if (!options) options = {}; // 延遲執行函數 var later = function() { // 若設定了開始邊界不執行選項,上次執行時間始終為0 previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); // 首次執行時,如果設定了開始邊界不執行選項,將上次執行時間設定為當前時間。 if (!previous && options.leading === false) previous = now; // 延遲執行時間間隔 var remaining = wait - (now - previous); context = this; args = arguments; // 延遲時間間隔remaining小于等于0,表示上次執行至此所間隔時間已經超過一個時間窗口 // remaining大于時間窗口wait,表示客戶端系統時間被調整過 if (remaining <= 0 || remaining > wait) { 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; }; }; _.debounce方法源碼 /** * 空閑控制 返回函數連續調用時,空閑時間必須大于或等于 wait,func 才會執行 * * @param {function} func 傳入函數 * @param {number} wait 表示時間窗口的間隔 * @param {boolean} immediate 設置為ture時,調用觸發于開始邊界而不是結束邊界 * @return {function} 返回客戶調用函數 */ _.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { // 據上一次觸發時間間隔 var last = _.now() - timestamp; // 上次被包裝函數被調用時間間隔last小于設定時間間隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; // 如果設定為immediate===true,因為開始邊界已經調用過了此處無需調用 if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = _.now(); var callNow = immediate && !timeout; // 如果延時不存在,重新設定延時 if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; }; };可視化演示
Throtte & Debounce 可視化演示
示例中每一行都以30ms的速度繪制時間軸,第一行Mousemove Events是參考基準,以50ms每次的響應頻率,在時間軸上輸出循環可見ASCII碼字符。
當鼠標進入左側方型區域(mouseenter 事件)所有行開始繪制時間軸, 鼠標晃動(mousemove 事件)會在時間軸上繪制字符塊,每個字符塊表示事件被觸發一次。為了展現延遲觸發效果,相鄰字符塊的演示和文字是不同的。
頂部的兩個按鈕每100毫秒觸發1次和每200毫秒觸發2次演示以固定頻率勻速觸發事件的效果。
演示地址:http://throttle-debounce.codi...
源碼地址:https://coding.net/u/duwan/p/...
使用場景
只要牽涉到連續事件或頻率控制相關的應用都可以考慮到這兩個函數,比如:
游戲射擊,keydown 事件
文本輸入、自動完成,keyup 事件
鼠標移動,mousemove 事件
DOM 元素動態定位,window 對象的 resize 和 scroll 事件
前兩者 debounce 和 throttle 都可以按需使用;后兩者肯定是用 throttle 了。如果不做過濾處理,每秒種甚至會觸發數十次相應的事件。尤其是 mousemove 事件,每移動一像素都可能觸發一次事件。如果是在一個畫布上做一個鼠標相關的應用,過濾事件處理是必須的,否則肯定會造成糟糕的體驗。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80842.html
摘要:如果想忽略結尾邊界上的調用,傳入返回客戶調用函數上次執行時間點延遲執行函數若設定了開始邊界不執行選項,上次執行時間始終為首次執行時,如果設定了開始邊界不執行選項,將上次執行時間設定為當前時間。 Underscore.js 是一個很精干的庫,壓縮后只有5.2KB。它提供了幾十種函數式編程的方法,彌補了標準庫的不足,大大方便了JavaScript的編程。 本文僅探討Unde...
摘要:舉例舉例通過拖拽瀏覽器窗口,可以觸發很多次事件。不支持,所以不能在服務端用于文件系統事件。總結將一系列迅速觸發的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續的操作流以每毫秒執行一次的速度執行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術,都可以控制一個函數在一段時間內執行的次數。 當我們在操作 DOM 事件的時候,為函數添加 debounce 或者 th...
摘要:自己嘗試一下年在的文章中第一次看到的實現方法。這三種實現方法內部不同,但是接口幾乎一致。如你所見,我們使用了參數,因為我們只對用戶停止改變瀏覽器大小時最后一次事件感興趣。 前幾天看到一篇文章,我的公眾號里也分享了《一次發現underscore源碼bug的經歷以及對學術界拿來主義的思考》具體文章詳見,微信公眾號:showImg(https://segmentfault.com/img/b...
摘要:用局部變量存儲本地范圍之外的變量值,如果它們在函數中的使用多于一次。將它的值存入一個局部變量,消除一次搜索過程。地將此值存入一個局部變量中。 總結了一下《高性能javascript》書中比較核心的點,并補充了一些點。 第一章 DOM標簽 將所有 標簽放置在頁面的底部,緊靠 body 關閉標簽的上方。此法可以保證頁面在腳本 運行之前完成解析。 將腳本成組打包。頁面的 標簽越少,頁面的加...
摘要:譯通過實例講解和防抖與節流源碼中推薦的文章,為了學習英語,翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發現防抖事件在等待觸發事件執行,直到事件都結束后它才執行。 [譯]通過實例講解Debouncing和Throtting(防抖與節流) lodash源碼中推薦的文章,為了學習(英語),翻譯了一下~ 原文鏈接 作者:DAVID CORBACHO 本文來自一位...
閱讀 3981·2021-11-22 15:31
閱讀 2518·2021-11-18 13:20
閱讀 3098·2021-11-15 11:37
閱讀 6960·2021-09-22 15:59
閱讀 736·2021-09-13 10:27
閱讀 3767·2021-09-09 09:33
閱讀 1435·2019-08-30 15:53
閱讀 2562·2019-08-29 15:37