JS防抖節流

2022-07-10 03:18:12 字數 828 閱讀 6267

在事件被觸發n秒後再執行**函式,如果在這n秒內又被觸發,則重新計時。

(1) 使用者在輸入框中連續輸入一串字元後,只會在輸入完後去執行最後一次的查詢ajax請求,這樣可以有效減少請求次數,節約請求資源;

(2) window的resize、scroll事件,不斷地調整瀏覽器的視窗大小、或者滾動時會觸發對應事件,防抖讓其只觸發一次;

//

非立即執行

function

debounce(cb, wait),wait)

}

}

//

立即執行版

function

debounce(cb,wait)

else

,wait);

} }}

規定乙個單位時間,在這個單位時間內,只能有一次觸發事件的**函式執行,如果在同乙個單位時間內某事件被觸發多次,只有一次能生效。

(1)滑鼠連續不斷地觸發某事件(如點選),只在單位時間內只觸發一次;

(2)在頁面的無限載入場景下,需要使用者在滾動頁面時,每隔一段時間發一次 ajax 請求,而不是在使用者停下滾動頁面操作時才去請求資料;

(3)監聽滾動事件,比如是否滑到底部自動載入更多,用throttle來判斷;

//

時間戳版

function

throttle(cb, wait)

} }

//

定時器版

function

throttle(cb, wait),wait) }}

}

js節流防抖

什麼是節流防抖?在學習這個問題前,我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊,很簡單的功能嘛,如下 text id input let input document.getelementbyid input input.addeventlistene...

js防抖節流

第一種 function debounce fn,delay delay 第二種 function debounce fn,delay delay 立即執行就是事件觸發後立即執行,然後超過一段時間沒有觸發事件,執行函式才會被觸發執行 function fn,delay timer settimeou...

js 防抖節流

函式防抖 將幾次操作合併為一此操作進行。原理是維護乙個計時器,規定在delay時間後觸發函式,但是在delay時間內再次觸發的話,就會取消之前的計時器而重新設定。這樣一來,只有最後一次操作能被觸發。應用 搜尋框在輸入稍有停頓時才更新推薦熱詞 function debounce handler,del...