節(jié)流

xcold 發(fā)布于2019-08-23 14:52 / 1044人閱讀

摘要：總結下來，所謂的節(jié)流，是通過在一段時間內(nèi)無視后來產(chǎn)生的回調請求來實現(xiàn)的。直到一段時間到了，第一次觸發(fā)的事件對應的回調才會執(zhí)行，而一段時間內(nèi)觸發(fā)的后續(xù)的回調都會被節(jié)流閥無視掉。

throttle 的中心思想在于：在某段時間內(nèi)，不管你觸發(fā)了多少次回調，我都只認第一次，并在計時結束時給予響應。

先給大家講個小故事：現(xiàn)在有一個旅客剛下了飛機，需要用車，于是打電話叫了該機場唯一的一輛機場大巴來接。司機開到機場，心想來都來了，多接幾個人一起走吧，這樣這趟才跑得值——我等個十分鐘看看。于是司機一邊打開了計時器，一邊招呼后面的客人陸陸續(xù)續(xù)上車。在這十分鐘內(nèi)，后面下飛機的乘客都只能乘這一輛大巴，十分鐘過去后，不管后面還有多少沒擠上車的乘客，這班車都必須發(fā)走。

在這個故事里，“司機” 就是我們的節(jié)流閥，他控制發(fā)車的時機；“乘客”就是因為我們頻繁操作事件而不斷涌入的回調任務，它需要接受“司機”的安排；而“計時器”，就是我們上文提到的以自由變量形式存在的時間信息，它是“司機”決定發(fā)車的依據(jù)；最后“發(fā)車”這個動作，就對應到回調函數(shù)的執(zhí)行。

總結下來，所謂的“節(jié)流”，是通過在一段時間內(nèi)無視后來產(chǎn)生的回調請求來實現(xiàn)的。只要一位客人叫了車，司機就會為他開啟計時器，一定的時間內(nèi)，后面需要乘車的客人都得排隊上這一輛車，誰也無法叫到更多的車。

對應到實際的交互上是一樣一樣的：每當用戶觸發(fā)了一次 scroll 事件，我們就為這個觸發(fā)操作開啟計時器。一段時間內(nèi)，后續(xù)所有的 scroll 事件都會被當作“一輛車的乘客”——它們無法觸發(fā)新的 scroll 回調。直到“一段時間”到了，第一次觸發(fā)的 scroll 事件對應的回調才會執(zhí)行，而“一段時間內(nèi)”觸發(fā)的后續(xù)的 scroll 回調都會被節(jié)流閥無視掉。

理解了大致的思路，我們現(xiàn)在一起實現(xiàn)一個 throttle：

// fn是我們要包裝的回調函數(shù)事件，Interval是我們要傳入的時間間隔
function throttle(fn, Interval) {
// 記錄上一次調用的時間；

let last = 0;
return function() {
    // 保存上下文的this
    let context = this
    // 保存?zhèn)魅氲膮?shù)
    let args = arguments;
    // 保存調用時的時間;
    let now = + new Date;
    // 判斷上一次調用時間和當前調用時間對比
    if (now - last > Interval) {
    // 更新最后一次調用時間;
        last = now;
        fn.apply(context, args);
    }
}

}
// 用throttle來包裝scroll的回調
let better_scroll = throttle(() => {console.log("觸發(fā)了滾動事件"), 1000});
document.addEventListener("scroll", better_scroll);

GPU云服務器云服務器函數(shù)節(jié)流節(jié)流保存字節(jié)流節(jié)流閥

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/101278.html

JavaScript 函數(shù)節(jié)流 throttle 和防抖 debounce

摘要：今天和別人聊到函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊，遂小小實踐一下，在此記錄，希望對需要的人有所幫助。防抖實現(xiàn)順利，但是兩個節(jié)流方法的執(zhí)行結果存在差異。今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖，發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊，遂小小實踐一下，在此記錄，希望對需要的人有所幫助。節(jié)流 - 頻繁操作，間隔一定時間去做一件事舉例說明：假定時間間隔為 500ms，頻繁...

mmy123456 2019-08-22 15:50 評論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結束后，處理回調，利用和實現(xiàn)。函數(shù)防抖關注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側重于一段時間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
節(jié)流 - 理解，實踐與實現(xiàn)

摘要：節(jié)流分流，與防抖去抖實現(xiàn)原理相似。本文主要討論節(jié)流，鏡像文章防抖理解，實踐與實現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解節(jié)流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節(jié)流模式，每一次觸發(fā)都會繪制一個圓點。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節(jié)流(分流)，與防抖（去抖）實現(xiàn)原理相似。本文主...

layman 2019-08-26 13:41 評論0 收藏0
JavaScript 函數(shù)節(jié)流和函數(shù)去抖應用場景辨析

摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場景，一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是，讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調用來節(jié)流。概述也是好久沒更新源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎）言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會涉及具體的代碼實現(xiàn)（關于代碼實現(xiàn)請期...

ZHAO_ 2019-08-21 14:35 評論0 收藏0
JS進階篇--JS函數(shù)節(jié)流（throttle）

摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設計一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)，它把定時器存為函數(shù)的一個屬性個人的世界觀不喜歡這種寫法。什么是函數(shù)節(jié)流？介紹前，先說下背景。在前端開發(fā)中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地搗亂...

cpupro 2019-08-20 16:41 評論0 收藏0
詳談js防抖和節(jié)流

摘要：本文會分別介紹什么是防抖和節(jié)流，它們的應用場景，和實現(xiàn)方式。防抖和節(jié)流都是為了解決短時間內(nèi)大量觸發(fā)某函數(shù)而導致的性能問題，比如觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。本文由小芭樂發(fā)表 0. 引入首先舉一個例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0