javascript 節流函數與消抖函數解析

2shou 發布于2019-08-22 15:04 / 575人閱讀

摘要：綁定函數運行上下文傳入函數參數測試函數節流函數什么是節流函數，類似與消抖函數但是不是僅僅有一個時間而已，還有一個最大時間當超過這個事件就必須觸發。

消抖函數：

什么是消抖函數，說一個自己應用的實例：
自己在做一個項目里，有一個需要監聽 input 元素（oninput 、 onchange），只要它的value 變，就需要去向服務器拉取數據。
不做優化的，用戶對值進行操作時，都向服務器端拉去數據。
例如：事件A: 用戶查詢的內容為 5個字，那么這個操作，就會向服務器請求 5次數據。
消抖就是定一個固定的t時間，延遲t時間后觸發請求服務器數據。
如果在t內，用戶繼續輸入了文字。清除上一個定時器，重新開一個延遲為t的定時器。否則直接觸發請求服務器數據的操作。這樣對于事件A 來說，選取合適的t, 最少只需要一次請求服務器數據。

function debouce (fn, time, ctx) {
    var k = null
    function exec (args) {
        // 綁定 函數運行上下文(this) && 傳入函數參數
        fn.apply(ctx || null, args)
        k = null
    }
    return function () {
         var args = arguments
         k !== null && clearTimeout(k)
         k = setTimeout(function () {exec(args)}, time)
    }
}
//測試函數
var test = debouce(function() {console.log(this);console.log(arguments)}, 3000, {a: 1})

節流函數

什么是節流函數，類似與消抖函數,但是,不是僅僅有一個時間t而已，還有一個
最大時間 maxLog. 當超過這個maxLog, 事件就必須觸發。這個主要用于對滾動軸事件的優化。想想用戶一直操作鼠標滾輪，不可能一直按照消抖函數那樣，一直不觸發滾動事件相應的處理邏輯吧。
實例demo

 var thrFn  = function (fn, time, maxLog) {
                var timeK = null
                // 
                var oTime = (new Date()).getTime()
                var execFn = function () {
                    fn()
                    oTime = (new Date()).getTime()
                }
                return function () {
                    var nTime = (new Date()).getTime()
                    clearTimeout(timeK)
                    if (nTime - oTime > maxLog) {
                        execFn()
                    } else {
                        timeK = setTimeout(execFn, time)
                    }
                }
    }

個人理解，不對之處，請大家指正。
下一文，準備 reudx 源碼解析。。。

云服務器 GPU云服務器函數節流 js函數節流 javascript 函數 javascript函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93137.html

js中函數節流&函數去抖

摘要：節流保證在一定時間內，只能觸發一次。我們在嘗試一下去抖消抖，消除抖動，感覺這個更好聽有沒有什么現成的上的一次發現源碼的經歷以及對學術界拿來主義的思考函數節流和函數去抖應用場景辨析函數去抖的實現開篇先提幾個問題？ 1.做搜索框的時候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發？是滾一段距離觸發一次？還是滾一圈觸發一次？還是滾...

王軍 2019-08-22 10:42 評論0 收藏0
我對js函數閉包的理解

摘要：第三個是在里的由于在匿名函數媽媽的肚子里，但是也是個獨立的個體，，當運行時，發現函數里用的聲明，就不用再進一步去匿名函數媽媽肚子里去找了。直接就輸出第四個是在里，但是沒有的聲明所以當運行時，就去匿名函數媽媽的肚子里去找，果然找到了。個人理解，請大家指正個人理解閉包作用：閉包可以用來隔離作用域（簡單來說可以隔離環境變量、函數...etc）,也就是說一般情況下函數里申明的變量不...

testHs 2019-08-22 15:54 評論0 收藏0
工作中常用的npm包

摘要：工具類工具庫，封裝了處理，，，等常見的函數，是對標準庫的補充。業務開發中常用的函數有很多，如等。示例如下整數處理保留兩位小數百分比處理億億處理萬萬處理格式化數字大于億的展示為億，大于萬的展示為萬億萬時間處理庫。工具類 lodash 工具庫，封裝了處理arrays，numbers，objects，string等常見的函數，是對標準庫的補充。業務開發中常用的函數有很多，如：assign,...

ermaoL 2019-08-23 18:02 評論0 收藏0
JavaScript防抖和節流

摘要：概念函數防抖和函數節流，兩者都是優化高頻率執行代碼的一種手段。防抖任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流指定時間間隔內只會執行一次任務一定時間內方法只跑一次。概念函數防抖和函數節流，兩者都是優化高頻率執行js代碼的一種手段。防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流：指定時間間隔內只會執行一次任...

DevWiki 2019-08-23 17:09 評論0 收藏0
前端面試題（4）JavaScript

摘要：變量聲明提升在中，函數聲明與變量聲明經常被引擎隱式地提升到當前作用域的頂部。對象的方法和屬性是在全局范圍內有效的。未形成標準，實現混亂。前端面試題JavaScript（一） JavaScript的組成 JavaScript 由以下三部分組成： ECMAScript（核心）：JavaScript 語言基礎 DOM（文檔對象模型）：規定了訪問HTML和XML的接口 BOM（瀏覽器對...

1treeS 2019-08-29 15:37 評論0 收藏0