- 相同點(diǎn)：防抖和節(jié)流的作用都是在高頻事件中防止函數(shù)被多次調(diào)用蝶溶。
- 不同點(diǎn)：防抖函數(shù)只會(huì)在高頻事件結(jié)束后n秒調(diào)用一次函數(shù)嗜历，節(jié)流函數(shù)會(huì)在高頻事件觸發(fā)過程中每隔n秒調(diào)用一次函數(shù)。
應(yīng)用場(chǎng)景
- 都是在使用高頻事件來調(diào)用函數(shù)的過程時(shí)抖所，例如：resize梨州、scroll事件，拖拽時(shí)的mousemove事件田轧，文字輸入暴匠、自動(dòng)完成的keyup事件。
封裝防抖函數(shù)
- 定義：觸發(fā)高頻事件后單位時(shí)間內(nèi)只執(zhí)行一次函數(shù)傻粘，如果指定時(shí)間內(nèi)高頻事件再次被觸發(fā)每窖，則重新計(jì)算時(shí)間
- scroll事件滾動(dòng)觸發(fā)事件
- 搜索框輸入查詢帮掉，等用戶停止輸入時(shí)再調(diào)用方法，減輕服務(wù)端壓力
- 表單驗(yàn)證
- 按鈕提交事件
- 瀏覽器窗口縮放窒典，resize(如窗口停止改變大小之后重新計(jì)算布局)等
function debounce(func, wait) {
let timeout = null;
return function() {
const ctx = this;
const args = arguments;
if (timeout) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(ctx, args)
}, wait);
}
}
}
節(jié)流函數(shù)
- 定義：在單位時(shí)間內(nèi)蟆炊，只觸發(fā)一次函數(shù)，如果單位事件內(nèi)觸發(fā)多次函數(shù)瀑志，只有一次生效
- DOM元素的拖拽功能實(shí)現(xiàn)（mousemove）
- 搜索聯(lián)想（keyup）
- 計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
- Canvas模擬畫板功能
- 射擊游戲的mousedown/keydown事件（單位時(shí)間只能發(fā)射一顆子彈）
- 監(jiān)聽滾動(dòng)事件判斷是否到頁面底部自動(dòng)加載更多
function throttle(func, wait) {
let timeout = null;
return function () {
const ctx = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(ctx, args);
}, wait)
}
}
}
