節流

xcold 發布于2019-08-23 14:52 / 987人閱讀

摘要：總結下來，所謂的節流，是通過在一段時間內無視后來產生的回調請求來實現的。直到一段時間到了，第一次觸發的事件對應的回調才會執行，而一段時間內觸發的后續的回調都會被節流閥無視掉。

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

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

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

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

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

理解了大致的思路，我們現在一起實現一個 throttle：

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

let last = 0;
return function() {
    // 保存上下文的this
    let context = this
    // 保存傳入的參數
    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("觸發了滾動事件"), 1000});
document.addEventListener("scroll", better_scroll);

GPU云服務器云服務器函數節流節流保存字節流節流閥

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

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

JavaScript 函數節流 throttle 和防抖 debounce

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

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

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0
節流 - 理解，實踐與實現

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

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

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

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

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

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

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

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