JavaScript 節流函式 Throttle 詳解 -------
在瀏覽器 DOM 事件裡面,有一些事件會隨著使用者的操作不間斷觸發。比如:重新調整瀏覽器視窗大小(resize),瀏覽器頁面滾動(scroll),滑鼠移動(mousemove)。也就是說使用者在觸發這些瀏覽器操作的時候,如果腳本里面綁定了對應的事件處理方法,這個方法就不停的觸發。
這並不是我們想要的,因為有的時候如果事件處理方法比較龐大,DOM 操作比如複雜,還不斷的觸發此類事件就會造成效能上的損失,導致使用者體驗下降(UI 反映慢、瀏覽器卡死等)。所以通常來講我們會給相應事件新增延遲執行的邏輯。
通常來說我們用下面的程式碼來實現這個功能:
var COUNT = 0; function testFn() { console.log(COUNT++); } // 瀏覽器resize的時候 // 1. 清除之前的計時器 // 2. 新增一個計時器讓真正的函式testFn延後100毫秒觸發 window.onresize = function () { var timer = null; clearTimeout(timer); timer = setTimeout(function() { testFn(); }, 100); };
細心的同學會發現上面的程式碼其實是錯誤的,這是新手會犯的一個問題:setTimeout 函式返回值應該儲存在一個相對全域性變數裡面,否則每次 resize 的時候都會產生一個新的計時器,這樣就達不到我們發的效果了
於是我們修改了程式碼:
var timer = null;
window.onresize = function () {
clearTimeout(timer);
timer = setTimeout(function() {
testFn();
}, 100);
};
這時候程式碼就正常了,但是又多了一個新問題 —— 產生了一個全域性變數 timer。這是我們不想見到的,如果這個頁面還有別的功能也叫 timer 不同的程式碼之前就是產生衝突。為了解決這個問題我們要用 JavaScript 的一個語言特性:
/** * 函式節流方法 * @param Function fn 延時呼叫函式 * @param Number delay 延遲多長時間 * @return Function 延遲執行的方法 */ var throttle = function (fn, delay) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } }; window.onresize = throttle(testFn, 200, 1000);
我們用一個閉包函式(throttle節流)把 timer 放在內部並且返回延時處理函式,這樣以來 timer 變數對外是不可見的,但是內部延時函式觸發時還可以訪問到 timer 變數。
當然這種寫法對於新手來說不好理解,我們可以變換一種寫法來理解一下:
var throttle = function (fn, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(function() {
fn();
}, delay);
}
};
var f = throttle(testFn, 200);
window.onresize = function () {
f();
};
這裡主要了解一點:被呼叫後返回的 function 才是真正的 onresize 觸發時需要呼叫的函式
現在看起來這個方法已經接近完美了,然而實際使用中並非如此。舉個例子:
如果使用者 不斷的 resize 瀏覽器視窗大小,這時延遲處理函式一次都不會執行
於是我們又要新增一個功能:當用戶觸發 resize 的時候應該 在某段時間 內至少觸發一次,既然是在某段時間內,那麼這個判斷條件就可以取當前的時間毫秒數,每次函式呼叫把當前的時間和上一次呼叫時間相減,然後判斷差值如果大於 某段時間 就直接觸發,否則還是走 timeout 的延遲邏輯。
下面的程式碼裡面需要指出的是:
- previous 變數的作用和 timer 類似,都是記錄上一次的標識,必須是相對的全域性變數
- 如果邏輯流程走的是“至少觸發一次”的邏輯,那麼函式呼叫完成需要把 previous 重置成當前時間,簡單來說就是:相對於下一次的上一次其實就是當前
/**
* 函式節流方法
* @param Function fn 延時呼叫函式
* @param Number delay 延遲多長時間
* @param Number atleast 至少多長時間觸發一次
* @return Function 延遲執行的方法
*/
var throttle = function (fn, delay, atleast) {
var timer = null;
var previous = null;
return function () {
var now = +new Date();
if ( !previous ) previous = now;
if ( now - previous > atleast ) {
fn();
// 重置上一次開始時間為本次結束時間
previous = now;
} else {
clearTimeout(timer);
timer = setTimeout(function() {
fn();
}, delay);
}
}
};
實踐:
我們模擬一個視窗 scroll 時節流的場景,也就是說當用戶滾動頁面向下的時候我們需要節流執行一些方法,比如:計算 DOM 位置等需要連續操作 DOM 元素的動作
完整程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>throttle</title>
</head>
<body>
<div style="height:5000px">
<div id="demo" style="position:fixed;"></div>
</div>
<script>
var COUNT = 0, demo = document.getElementById('demo');
function testFn() {demo.innerHTML += 'testFN 被呼叫了 ' + ++COUNT + '次<br>';}
var throttle = function (fn, delay, atleast) {
var timer = null;
var previous = null;
return function () {
var now = +new Date();
if ( !previous ) previous = now;
if ( atleast && now - previous > atleast ) {
fn();
// 重置上一次開始時間為本次結束時間
previous = now;
clearTimeout(timer);
} else {
clearTimeout(timer);
timer = setTimeout(function() {
fn();
previous = null;
}, delay);
}
}
};
window.onscroll = throttle(testFn, 200);
// window.onscroll = throttle(testFn, 500, 1000);
</script>
</body>
</html>
我們用兩個 case 來測試效果,分別是新增至少觸發 atleast 引數和不新增:
// case 1 window.onscroll = throttle(testFn, 200); // case 2 window.onscroll = throttle(testFn, 200, 500);
case 1 的表現為:在頁面滾動的過程(不能停止)中 testFN 不會被呼叫,直到停止的時候會呼叫一次,也就是說執行的是 throttle 裡面 最後 一個 setTimeout ,效果如圖(檢視原 gif 圖):
case 2 的表現為:在頁面滾動的過程(不能停止)中 testFN 第一次會延遲 500ms 執行(來自至少延遲邏輯),後來至少每隔 500ms 執行一次,效果如圖
至此為止,我們想要實現的效果已經基本完成。後續的一些輔助性優化讀者可以自己琢磨,如:函式 this 指向,返回值儲存等。
相關推薦
JavaScript 節流函式 Throttle 詳解 -------
在瀏覽器 DOM 事件裡面,有一些事件會隨著使用者的操作不間斷觸發。比如:重新調整瀏覽器視窗大小(resize),瀏覽器頁面滾動(scroll),滑鼠移動(mousemove)。也就是說使用者在觸發這些瀏覽器操作的時候,如果腳本里面綁定了對應的事件處理方法,這個方法就不停
JavaScript中立即執行函式例項詳解 轉載 作者:李牧羊
javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關於JavaScript中立即執行函式的相關資料,需要的朋友可以參考下。 前言
JavaScript中bind、call、apply函式用法詳解
在給我們專案組的其他程式介紹 js 的時候,我準備了很多的內容,但看起來效果不大,果然光講還是不行的,必須動手。前幾天有人問我關於程式碼裡 call() 函式的用法,我讓他去看書,這裡推薦用js 寫伺服器的程式猿看《javascript程式設計精粹》 這本書,crockfo
【JavaScript中的this詳解】
定律 htm uid js代碼 tdd ati tom dmr doctype 前言 this用法說難不難,有時候函數調用時,往往會搞不清楚this指向誰?那麽,關於this的用法,你知道多少呢? 下面我來給大家整理一下關於this的詳細分析,希望對大家有所幫助!
JavaScript中getBoundingClientRect()方法詳解
script otto java chrome 頁面 支持 urn client fire getBoundingClientRect() 這個方法返回一個矩形對象,包含四個屬性:left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
JavaScript的作用域詳解。
undefine 們的 標簽 不變 java 解決 rip 留言 img 很多人學過JS吧,可能有大神一笑而過,本篇文章自我撰寫,只適合新手不懂的同學們,大神請在2路公交車站左拐,也歡迎指點。 我在幾個月前是個連
JavaScript 事件委托詳解
通過 rdo ole -s list 實現 urn ret parent 基本概念 事件委托,通俗地來講,就是把一個元素響應事件(click、focus……)的函數委托到另一個元素; 一般來講,會把一個或者一組元素的事件委托到它的父層或者更外層元素上,真正綁定事件的是外層元
javascript History對象詳解
以及 撤銷 會話 ie10 不同之處 調用 網頁 content 必須 length history.length屬性保存著歷史記錄的URL數量。初始時,該值為1。由於IE10+瀏覽器在初始時返回2,存在兼容性問題,所以該值並不常用 跳轉方法 go()、back()
JavaScript 運行機制詳解
div eight 同步問題 是否 ring art 原因 erro 兩種 本文轉自阮一峰大神 【個人理解點:】 1. "任務隊列"是一個事件的隊列,只要事件指定過回調函數,這些事件完成任務時,就會向"任務隊列"添加一個事件,等待主線程讀取。 2. 當主線程執行完&l
JavaScript經典面試題詳解
局部對象 hello 結果 檢查 fun type 功能 初始化 als 以下是我遇到的一些經典的JS面試題,結合我自己的理解寫的詳解,主要參考高程一書,歡迎大家批評指正 1. var a; console.log(a);
javascript中new關鍵字詳解
nbsp pan cnblogs undefined 百度地圖 實例 code undefine tro 和其他高級語言一樣 javascript 中也有 new 運算符,我們知道 new 運算符是用來實例化一個類,從而在內存中分配一個實例對象。 但在 javascript
JavaScript節流函式
var throttle = function(fn, delay, mustRunDelay){ var timer = null; var start; // 這裡是利用一個閉包來儲存變數,避免汙染全域性變數 return function(){
簡單的節流函式throttle
在實際專案中,總會遇到一些函式頻繁呼叫的情況,比如window.resize,mouseover,上傳進度類似的觸發頻率比較高的函式,造成很大的效能損耗,這裡可以使用節流函式來進行效能優化,主要是限制函式被頻繁呼叫的解決方案: let throttle = function(fn,inte
C++多型呼叫實現原理(虛擬函式表詳解)
1.帶有虛擬函式的基類物件模型 我們先看段程式碼: #include<iostream> using namespace std; class B1 { public: void func1() {} int _b; }; class B2 { pub
WordPress函式wp_page_menu詳解
說明 該標籤顯示帶有連結的WordPress頁面列表,並且可以選擇將 Home(主頁)自動顯示為列表中的一員。該標籤是自定義側邊欄和標題欄的好幫手,同時還可以用在其它模板中。 WordPress教程 用法 <?php wp_page_menu( $args&n
ROW_NUMBER() OVER()函式用法詳解 (分組排序 例子多)
語法格式:row_number() over(partition by 分組列 order by 排序列 desc) row_number() over()分組排序功能: 在使用 row_number() over()函式時候,over()裡頭的分組以及排序的執行晚於 wher
matlab對影象操作函式的詳解(筆記1)
matlab對影象操作函式的詳解 一. 讀寫影象檔案 1. imread imread函式用於讀入各種影象檔案,如:a=imread('e:\w01.tif') 注:計算機E盤上要有w01相應的.tif檔案。 2. imwrite imwrite函式用於寫入影象檔案,如:im
linux之select函式用法詳解
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
javascript當中的this詳解
this是呼叫上下文,上下文被建立或者初始化時才確定 非嚴格模式:this是全域性物件;嚴格模式:this是undefined 函式呼叫 a. 以函式形式呼叫的函式通常不使用this關鍵字,非嚴格模式下函式呼叫模式的this就是全域性物件。 b. 以方法形式呼叫的函式的t
regionprops函式用法詳解
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!