溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關javascript的防抖和節(jié)流是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
防抖和節(jié)流都是為了解決短時間內大量觸發(fā)某函數(shù)或者事件而導致的性能問題，比如在
1.用戶體驗上，觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死，卡頓的現(xiàn)象
2.服務器上：加重服務器壓力
防抖是當事件或函數(shù)被觸發(fā)后，延遲n秒后在執(zhí)行回調，如果在這n秒內事件或函數(shù)又被觸發(fā)，則重新計時，直到n秒內沒有觸發(fā)事件或函數(shù)，則執(zhí)行回調函數(shù)
圖文解釋：
（回城的時間就相當于延遲時間，如果在回城的時間內再次觸發(fā)回城則重新倒計時回城時間）
案例：表單輸入框事件
<!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" class="serach">
<script>
let serach = document.getElementsByClassName('serach')[0]
// console.log(serach);
serach.addEventListener('input', function() {
console.log('向后端發(fā)起了請求！');
})
</script>
</body>
</html>運行：
可以看出當我每次輸入一個數(shù)字的時候都發(fā)起了請求，這是不符合項目要求和這非常消耗服務器的性能，我們應該在用戶在輸入內容后的一段時間內如果用戶不再輸入內容再發(fā)起請求，用戶如果在這一段時間內再次輸入，則繼續(xù)等待用戶在一段時間內不再輸入內容后再發(fā)起請求。
使用防抖優(yōu)化：
<!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" class="serach">
<script>
let serach = document.getElementsByClassName('serach')[0]
// console.log(serach);
let timer = null; //聲明一個用于防抖的定時器變量timer
serach.addEventListener('input', function() {
clearTimeout(timer) //如果在定時器的時間間隔內再次觸發(fā)事件則清除定時器，重新執(zhí)行新的定時器函數(shù)
// 定時器函數(shù)
timer = setTimeout(function() {
console.log('向后端發(fā)起了請求！');
}, 500)
})
</script>
</body>
</html>運行：
如果在500毫秒內調用多次，只會執(zhí)行最后一次
可以看出在輸入完內容后的500毫秒后才發(fā)起請求
防抖的應用場景：
1.用戶在輸入框連續(xù)輸入一串字符時，可以通過放抖策略，只在輸入完后，才執(zhí)行查詢的請 求，這樣可以有效減少請求次數(shù)，節(jié)約請求資源。（也可以用節(jié)流）
2.登錄、發(fā)短信等按鈕避免用戶點擊太快，以致于發(fā)送了多次請求，需要防抖
3.調整瀏覽器窗口大小時，resize 次數(shù)過于頻繁，造成計算過多，此時需要一次到位，就用到了防抖
4.文本編輯器實時保存，當無任何更改操作一秒后進行保存
控制事件發(fā)生的頻率從而達到減少一段時間內事件的觸發(fā)頻率，如控制為1s發(fā)生一次，甚至1分鐘發(fā)生一次。
圖文解釋：
（當玩射擊游戲時，無論你手點的有多快射出的彈還是有規(guī)律的發(fā)出（比如0.5發(fā)出一個彈））
案例：獲取鼠標的最終坐標
<!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>
.app {
width: 800px;
height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div class="app">
</div>
<script>
let app = document.getElementsByClassName('app')[0]
app.addEventListener('mousemove', function(e) {
console.log(`x坐標${e.pageX},y坐標${e.pageY}`);
})
</script>
</body>
</html>運行：
可以看出每次鼠標移動都執(zhí)行函數(shù)，大大消耗性能，我們可以利用節(jié)流策略，一秒內只執(zhí)行一次來節(jié)流
節(jié)流優(yōu)化：
<!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>
.app {
width: 800px;
height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div class="app">
</div>
<script>
let app = document.getElementsByClassName('app')[0]
let timer = true; //定義一個節(jié)流閥變量來控制節(jié)流閥為關閉還是開啟狀態(tài)，默認為開啟
app.addEventListener('mousemove', function(e) {
if (!timer) {
return //判斷節(jié)流閥是否關閉，如果節(jié)流閥還是false（關閉狀態(tài)），則證明上次的函數(shù)未執(zhí)行完，直接退出函數(shù)
}
timer = false; //設置節(jié)流閥為false，如果定時器函數(shù)沒有設置為true，則定時器函數(shù)沒執(zhí)行，節(jié)流閥一直為關(false)
setTimeout(function() {
console.log(`x坐標${e.pageX},y坐標${e.pageY}`)
timer = true //定時器函數(shù)已經(jīng)執(zhí)行，設置節(jié)流閥為true
}, 500)
})
</script>
</body>
</html>運行效果：
使用節(jié)流后，坐標打印次數(shù)明顯變少，節(jié)流效果達成
防抖:如果事件被頻繁觸發(fā)，防抖能保證只有最后一次觸發(fā)生效!前面N多次的觸發(fā)都會被忽略!
節(jié)流:如果事件被頻繁觸發(fā)，節(jié)流能夠減少事件觸發(fā)的頻率，因此，節(jié)流是有選擇性地執(zhí)行一部分事件，單位時間內事件只能觸發(fā)一次
關于“javascript的防抖和節(jié)流是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
