javascript 節(jié)流函數(shù) 與消抖函數(shù) 解析

2shou 發(fā)布于2019-08-22 15:04 / 627人閱讀

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

消抖函數(shù)：

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

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

節(jié)流函數(shù)

什么是節(jié)流函數(shù)，類似與消抖函數(shù),但是,不是僅僅有一個時間t而已，還有一個
最大時間 maxLog. 當超過這個maxLog, 事件就必須觸發(fā)。這個主要用于對滾動軸事件的優(yōu)化。想想用戶一直操作鼠標滾輪，不可能一直按照消抖函數(shù)那樣，一直不觸發(fā)滾動事件相應的處理邏輯吧。
實例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云服務器函數(shù)節(jié)流 js函數(shù)節(jié)流 javascript 函數(shù) javascript函數(shù)

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

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

js中函數(shù)節(jié)流&函數(shù)去抖

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

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

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

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

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

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

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

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

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

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