js高性能函數防手震與節流詳解
函數節流是指一定時間內js方法只跑一次，函數防手震：是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次。本文主要和大家分享js高性能函數防手震與節流詳解，希望能幫助大家。
一.函數節流（throttle）
1.函數節流的目的
例如，DOM 操作比起非DOM 互動需要更多的記憶體和CPU時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時甚至會崩潰。尤其在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，事件會連續觸發。在onresize 事件處理程序內部如果嘗試進行DOM 操作，其高頻率的變更可能會讓瀏覽器崩潰。又例如，我們常見的一個搜尋的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜尋一次。但是我們的目的主要是每輸入一些內容搜尋一次而已。為了解決這些問題，就可以使用定時器對函數進行節流。
2.函數節流的原理
某些程式碼不可以在沒有間斷的情況連續重複執行。第一次呼叫函數，建立一個定時器，在指定的時間間隔之後執行程式碼。當第二次呼叫函數時，它會清除前一次的計時器並設定另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為新的定時器。目的是只有在執行函數的請求停止了一段時間之後才執行。
3.函數節流的基本模式
var processor = {
timeoutId: null,
//实际进行处理的方法
performProcessing: function(){
//实际执行的代码
},
//初始处理调用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
}, 100);
}
};
//尝试开始执行
processor.process();4.列子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="search" type="text" name="search">
<script>
function queryData(text){
console.log("搜索：" + text);
}
var input = document.getElementById("search");
input.addEventListener("keyup", function(event){
throttle(queryData, null,500,this.value,1000);
});
function throttle(fn,context,delay,text,mustApplyTime){
clearTimeout(fn.timer);
fn._cur=Date.now(); //记录当前时间
if(!fn._start){ //若该函数是第一次调用，则直接设置_start,即开始时间，为_cur，即此刻的时间
fn._start=fn._cur;
}
if(fn._cur-fn._start>mustApplyTime){ //当前时间与上一次函数被执行的时间作差，与mustApplyTime比较，若大于，则必须执行一次函数，若小于，则重新设置计时器
fn.call(context,text);
fn._start=fn._cur;
}else{
fn.timer=setTimeout(function(){
fn.call(context,text);
},delay);
}
}
</script>
</body>
</html>JavaScript 節流函數Throttle 詳解
談談JS中的函數節流
二.函數防手震（debounce）
在解釋這個函數前，我們先看下範例：註冊頁面，需要驗證電話號碼。此時我們可能想到的做法就是監聽keypress事件，然後異驗證。這個方法本身是沒錯的，但是如果用戶快速的輸入了一連串的手機號碼，那麼就會在瞬間觸發了11次的請求，這無疑不是我們想要的。我們想要的是用戶停止輸入的時候才去觸發驗證的請求，這時候函數防手震可以幫我們。
function debounce(func, wait, immediate) {
var timeout; // 持久化一个定时器
// 闭包函数可以访问timeout
return function() {
// 通过 this 和 arguments 获得函数的作用域和参数
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout); // 如果事件被触发，清除timer并重新开始计时
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};參數function是需要函數防手震的函數；參數wait則是需要等待的時間，單位為毫秒；immediate參數如果為true，則debounce函數會在呼叫時立刻執行一次function，而不需要等到wait這個時間後，例如防止點擊提交按鈕時的多次點擊就可以使用這個參數。
列子：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>函数防抖与节流 </title>
</head>
<body>
<form class="form-cnt" action="" method="">
<input type="text" value="" id="tel"/>
</form>
<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script>
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function checkTel(){
var val = $("#tel").val();
var re = new RegExp("(^1[3|4|5|7|8][0-9]{9}$)");
if(re.test(val)){
console.log("结果：格式正确");
}else{
console.log("结果：格式错误");
}
}
var lazyQuery = debounce(checkTel, 300);
$("#tel").on("keypress",lazyQuery);
</script>
</body>
</html>
#這效果就看到觸發了6次而不是11次
三.應用場景
(1).函數節流（throttle）
1. 頻繁的mousemove/keydown，例如高頻的滑鼠移動，遊戲射擊類別的
2. 搜尋聯想（keyup ）
3. 進度條（我們可能不需要高頻的更新進度）
4. 拖曳的dragover等
5. 高頻的點擊，抽獎等（哈哈，邪惡）
(2).函數防手震（debounce）
1. scroll/resize事件
2. 文字連續輸入，ajax驗證/關鍵字搜尋
以上是js高性能函數防手震與節流詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11管理員權限取得詳解
Mar 08, 2024 pm 03:06 PM
Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限
Oracle SQL中的除法運算詳解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算
linux系統呼叫system()函數詳解
Feb 22, 2024 pm 08:21 PM
Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統
PHP模運算子的作用及用法詳解
Mar 19, 2024 pm 04:33 PM
PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模
Linux的curl指令詳解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()詳解，需要具體程式碼範例Promise是JavaScript中一種用來處理非同步操作的機制。在實際開發中，常常需要處理一些需要依序執行的非同步任務，而Promise.resolve()方法就是用來傳回一個已經Fulfilled狀態的Promise物件。 Promise.resolve()是Promise類別的靜態方法，它接受一個
numpy版本查詢方法詳解
Jan 19, 2024 am 08:20 AM
Numpy是一款Python科學計算庫，提供了豐富的陣列操作函數與工具。升級Numpy版本時需要查詢目前版本以確保相容性，本文將詳細介紹Numpy版本查詢的方法，並提供具體的程式碼範例。方法一：使用Python程式碼查詢Numpy版本使用Python程式碼可以輕鬆查詢Numpy的版本，以下是實作方法和範例程式碼：importnumpyasnpprint(np
詳細解析C語言學習路線
Feb 18, 2024 am 10:38 AM
C語言作為一門廣泛應用在軟體開發領域的程式語言，是許多程式設計師初學者的首選。學習C語言不僅可以幫助我們建立程式設計的基礎知識，還可以提升我們解決問題和思考的能力。本文將詳細介紹一條C語言學習的路線圖，幫助初學者更好地規劃自己的學習進度。 1.學習基本文法在開始學習C語言之前，我們首先需要先了解C語言的基本文法規則。這包括變數和資料類型、運算子、控制語句（如if語句、
