防抖和節流學習記錄

說明：以監聽屏幕大小改變（resize）demo來演示

function resize(){console.log('調節了屏幕的大小') } window.addEventListener('resize', resize)

1.防抖和節流函數（功能實現）

核心：利用閉包存儲一個起始點（用于判斷是否執行）

節流函數：函數在一段時間內多次調用，經過一定時間間隔后才可再一次執行（執行多次）

時間戳

function throttle(func, delay) {let last = 0;return function () {let now = Date.now();if(now >= delay + last){ // 第一次執行時一定為true，所以觸發后執行一次funcfunc.apply(this, arguments);last = now}else{console.log('距離上次調用的時間差不滿足要求哦')}} } window.addEventListener('resize', throttle(resize, 3000))

定時器

function throttle(func, delay) {let timer = null;return function () {if(!timer){func.apply(this, arguments);timer = serTimeout(() => { //設定timer后，定時再將timer賦值null，才可再一次進入iftimer = null}, delay)}else{console.log('距離上次調用的時間差不滿足要求哦')}} } window.addEventListener('resize', throttle(resize, 3000))

demo 效果：執行多次

防抖函數：函數在一段時間內的多次調用，僅使得最后一次有效。（一段時間內只執行一次）

function debounce(func, delay){let timer;return function () {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments)}, delay)} } window.addEventListener('resize', debounce(resize, 3000))

效果：改變屏幕大小函數不執行，停止改變屏幕大小后待delay到達后執行一次

2.防抖和節流函數（進階拓展）

上面的函數是有一個默認的執行時機的防抖是多次觸發后只執行一次；節流是觸發后執行一次然后隔一段時間才再一次執行。那么這個執行的時機應該給使用者自定義，所以在引入一個immediate，是否立刻執行一次

節流函數：

function throttle(func, delay, immediate){let timer = null;return function() {if(immediate){ // 存在就立馬執行func.apply(this, arguments)immediate = false}if(!timer){timer = setTimeout(() => {func.apply(this, arguments) // immediate不存在，delay到了事件再執行timer = null}, delay)}else{console.log('上一個定時任務尚未完成')}} } window.addEventListener('resize', throttle(resize, 3000, false));

防抖函數：

function debounce (func, delay, immediate) {let timer = null;return function () {if(immediate && !timer){func.apply(this, arguments)}if(timer) clearTimeout(timer)timer = setTimeout(() => {func.apply(this, arguments)}, delay)} } window.addEventListener('resize', debounce(resize,3000,false))

3.運用場景

防抖：一般在用戶輸入時或者 resize事件，例如輸入后校驗，搜索框返回結果
節流：一般在滾動條事件，是否滑倒底部加載更多，100~500ms delay；鼠標不斷點擊觸發

學習來源：
掘金作者：大帥老猿；
鏈接：https://juejin.cn/post/6962949488646291486

總結

以上是生活随笔為你收集整理的防抖和节流学习记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。