防抖與節流

2022-06-21 19:06:11 字數 442 閱讀 1465

在輸入框輸入時,要搜尋某個字串,基於效能考慮,肯定不能使用者沒輸入乙個字元就傳送一次搜尋請求,一種方法就是等待使用者停止輸入,比如過了500ms使用者都沒有再輸入,那麼就搜尋此時的字串,這就是防抖;

節流比防抖寬鬆一些,比如我們希望給使用者一些搜尋提示,所以在使用者輸入過程中,沒過500ms就查詢一次相關字串,這就是節流。

節流的實現思路:每次觸發事件時都判斷當前是否有等待執行的延時函式:

data()     

}methods: , 500)

} }

防抖的實現思路:每次觸發事件時都取消之前的延時呼叫方法:
data()     

}methods:

this.flag = true

settimeout(() => , 500)

}

}

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發,一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發,在一秒內只能觸發一次。比如滾動條持續向下滾動,載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中,我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料,根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步,那麼當使用者的操作十分頻繁時,就會多出許多無用的事件操作,並加重瀏覽器的負擔,影響頁面的效能。這時我們可以採用debounce 防抖 和thr...