1.防抖(debounce)
1.1 防抖講解
防抖，就是防止抖動，官方定義就是用戶在觸發一次事件后，又在規定的時間內多次觸發相同的事件，每次觸發都會清除上次事件，也就是說只會觸發最后一次事件，
但是在我看來，防抖用最通俗易懂的話來說，就是一個運送水泥的流水線車間，每次傳送帶都會將水泥送到最頂端，但是他不能掉下去到貨艙里，只能通過在一定時間內傳送帶的下一次水泥傳送過來，把它撞到貨艙里面，直到傳送帶停止了，還會有一包水泥在最頂端，這袋水泥就好比我們最后觸發的事件，傳送帶每次傳送下一次水泥過來的時間就是我們設定的規定時間，如果他一直在規定時間內把水泥傳送過來，那么始終頂部就只有一袋水泥，只有傳送帶停止傳送之后，最后的那袋水泥，才是我們最后觸發的那個事件！
1.2 實際專案應用場景
- 用戶進行登錄注冊時，多次頻繁點擊，應用防抖讓服務器只收到最后一次點擊的請求，
- 我們在csdn寫博客時，它會一段時間內自動跟你保存，如果你一直在編輯，它就不會觸發，只會在你停止編輯幾秒后自動保存，也運用到了防抖！
- 調整瀏覽器大小resize時，如果用戶的resize頻率很快，就只會調整最后一次用戶調整的resize大小，
1.3代碼實作
let btn = document.getElementById('btn'); //上面有一個點擊按鈕，獲取這個按鈕
btn.addEventListener('click', debounce()) //用事件監聽的形式系結事件，第二個引數傳入一個封裝好的防抖函式debounce
function debounce() { //封裝防抖函式
let timer; //定義一個變數timer
return function () {
clearTimeout(timer); //每次點擊在定時器還沒到時的時候會清除timer
timer = setTimeout(() => { //設定定時器timer，在規定時間內點擊會讓timer清除，
console.log('我是防抖');
}, 1000) //直到定時器到時，再沒有點擊事件，就是輸出我是防抖
}
}2.節流（throttle)
2.1節流講解
節流，在我理解看來，就是節省流量，官方說法就是在一定時間內多次觸發事件，它在該事件內只會觸發一次，也就是說過了這段事件后又可以觸發這一次，這就是節流，
舉一個通俗的例子，就跟我們玩CF和吃雞這種fps游戲一樣，你玩射速很慢的槍，就算你滑鼠點的再快，甚至于按著不動，那個槍的子彈也只能隔一段時間打出去幾發，其實節流這個詞的說法也就是在現實生活中參考過來的，江河為了限制船舶的流量，造成不必要的堵塞，也會有節流的做法，
2.2 節流實際專案應用場景
- 用戶滑鼠滾輪，隔一段時間才會計算位置資訊，不會一滑到就會加載東西
- 商品預覽圖的放大鏡效果時，不必每次滑鼠移動都計算位置，
2.3 代碼實作
let btn = document.getElementById('btn'); //上面有一個點擊按鈕，獲取這個按鈕
btn.addEventListener('click', debounce()) //用事件監聽的形式系結事件，第二個引數傳入一
//個封裝好的節流函式throttle
function throttle() { //封裝一個節流函式
let flag = true; //先定義一個節流閥
return function () {
if (!flag) { //第一次點擊過后再點擊flag為false，就一直進入這個分支，達到一定時間
//內只輸出一次的效果;
return;
}
flag = false; //讓flag為false
setTimeout(() => { //定義一個定時器
console.log('我是節流');
flag = true //當定時器到時的時候,讓flag重新為true
}, 1000)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/274552.html
標籤：其他