防抖和節流 在處理高頻事件，類似於window的resize或者scorll，或者input輸入校驗等操作時。如果直接執行事件處理器，會增大瀏覽器的負擔，嚴重的直接卡死，用戶體驗非常不好。 面對這種情況，我們一般可以採用防抖和節流的方式減少調用頻率。同時也不會影響實際效果。 一、防抖 防抖的作用是： ...
防抖和節流
在處理高頻事件，類似於window的resize或者scorll，或者input輸入校驗等操作時。如果直接執行事件處理器，會增大瀏覽器的負擔，嚴重的直接卡死，用戶體驗非常不好。
面對這種情況，我們一般可以採用防抖和節流的方式減少調用頻率。同時也不會影響實際效果。
一、防抖
防抖的作用是：在事件被觸發的n秒後執行回調，如果在這n秒內又被觸發，則重新計時。
常見場景：
input校驗：在input輸入完成後，不需進行額外操作（比如：點擊按鈕，或者blur事件），而是需要敲完代碼通過keydown事件觸發校驗程式。此時如果不作處理，會導致校驗程式頻繁觸發，影響用戶體驗。
此時可以使用防抖來解決這個問題。代碼如下：
<input type="text" onkeydown="checkout(this)" />
<script>
var timer = null
// 防抖：當持續時間觸發時。一定時間內沒有再觸發事件，事件處理函數才會執行一次
function debounce (fn, delay) {
clearTimeout(timer)
timer = setTimeout(fn, delay)
}
// 校驗方法在 1秒內 無操作後執行
function checkout (input) {
debounce(function(){
ifCompliance(input.value)
},1000)
}
// 校驗方法，長度小於 7 不規範
function ifCompliance (val) {
if(val && val.length < 7){
alert("不符合規範")
}
}
</script>二、節流
節流的作用是：在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。
常見場景：
如果在一個頁面中有很多張圖片，就可能會使用懶載入技術，即監聽滾動條的改變，而載入圖片。為了避免一直觸發滾動事件的處理程式，可以使用節流。
節流 demo 如下：
// 列印 scroll 的日誌
function scrollLog () {
console.log('scrollLog')
}
// 節流：持續觸發事件時，規定在一定時間內只會發生一次。
function throttle (fn, delay) {
var startTime = Date.now()
return function () {
var curTime = Date.now()
var remain
if (curTime - startTime >= delay) {
fn && fn()
startTime = Date.now()
}
}
}
window.addEventListener('scroll', throttle(scrollLog, 1000))防抖和節流的小知識就到這裡，如果對你有幫助還請點個贊。
