本文小編為大家詳細介紹“JavaScript中函數的防抖與節流怎么應用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript中函數的防抖與節流怎么應用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
同時觸發多次函數執行，執行的是相同內容，要求只執行第一次請求。
例如scroll事件，鼠標滾動一次觸發多次函數執行，只需要執行一次。
定義類似于開關的效果，定義一個變量儲存默認值，觸發執行之前先判斷變量存儲的數據，如果是原始數據賦值變量新數據，如果不是原始數據，執行return 終止之后程序的執行。
這里我們先寫一個窗口監聽事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
//設置高度讓頁面顯示滾動條
height: 4000px;
}
</style>
</head>
<body>
<script>
// 創建窗口監聽事件
window.addEventListener("scroll",function(){
fun();
})
// 隨便寫一個后臺輸出函數
function fun(){
console.log(666);
console.log(888);
}
</script>
</body>
</html>
可以看到，博主只撥動了一次鼠標的滾輪，但是函數卻執行了不止一次。
函數的節流就是要做到，滾動一次，執行一次函數，后臺輸出一次結果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
</style>
</head>
<body>
<script>
// 創建窗口監聽事件
// 存儲一個默認值為true
let flag = true ;
// 窗口監聽事件
window.addEventListener("scroll",function(){
if( flag ){
flag = false ;
}else{
return ;
}
fun();
})
// 隨便寫一個后臺輸出函數
function fun(){
// document.write('已經到達1000px的上卷高度了')
console.log(666);
}
</script>
</body>
</html>
同時觸發多次函數執行，只執行最后一次請求，多次觸發的函數程序結果是不同的。
通過延時器延遲時間執行程序，先清除定時器，再觸發定義的新的延時器執行函數程序。
這里我們先寫一個input輸入數據事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 獲取標簽
const oIpt = document.querySelector('input');
// input輸入事件監聽
oIpt.addEventListener('input',function(){
console.log(`您輸入了${oIpt.value.length}個字`);
})
</script>
</body>
</html>
這里我判斷的是輸入字符串的長度，可以看到輸出結果由1-5個字，最后打出中文又變回了2個字符。那防抖的操作就是我只打出最后一個“你好”這串字符的長度。
也就是同時觸發多次函數請求，只執行最后一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 獲取標簽
const oIpt = document.querySelector('input');
// input輸入事件監聽
oIpt.addEventListener('input',function(){
// 先清除定時器
clearInterval( time );
// 定義延時器 延遲執行 函數程序
time = setTimeout( function(){
// 延時器 延遲一秒 執行程序
setPage() ;
} , 2000 );
})
function setPage(){
console.log(`您輸入了${oIpt.value.length}個字`);
}
</script>
</body>
</html>
讀到這里，這篇“JavaScript中函數的防抖與節流怎么應用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
