防抖(debounce)
一句話概括：防抖是給定一個時間周期，如果觸發事件的周期小于該事件（也就是觸發過快），則不會觸發事件，
舉個例子：我給定的時間周期是1s，如果我在觸發第一次事件后1s內觸發該事件，則重新開始計時，直到觸發周期大于1s才會執行事件的方法，
function debounce(fn,timeout){
let timer = null
return function(){
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(window,arguments)
}, timeout);
}
}
一句話概括：節流是給定一個時間周期，然后對頻率大的觸發進行削峰，如果觸發事件的周期大于該事件（也就是觸發過快），則會觸發事件的周期限定在給定的周期內，如果小于則按照正常的時間觸發，
舉個例子：我給定的時間周期是1s，如果我在觸發第一次事件后連續0.5s內觸發該事件，那觸發周期會變成每間隔1s執行事件，
節流(throttle)
function throttle(fn,timeout){
let flag = true
return function(){
if(flag){
setTimeout(() => {
fn.apply(this,arguments)
flag = true
}, timeout);
}
flag = false
}
}
其他應用場景舉例
講完了這兩個技巧，下面介紹一下平時開發中常遇到的場景：
- 搜索框input事件，例如要支持輸入實時搜索可以使用節流方案（間隔一段時間就必須查詢相關內容），或者實作輸入間隔大于某個值（如500ms），就當做用戶輸入完成，然后開始搜索，具體使用哪種方案要看業務需求，
- 頁面resize事件，常見于需要做頁面適配的時候，需要根據最終呈現的頁面情況進行dom渲染（這種情形一般是使用防抖，因為只需要判斷最后一次的變化情況）
第三方實作
如果自己不愿意封裝，可以用第三方實作，比如lodash庫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550967.html
標籤：JavaScript
下一篇：返回列表