函式防抖節流問題

2022-06-19 22:00:23 字數 888 閱讀 4052

1.函式防抖和函式節流都是防止某一時間頻繁觸發,但是這兩兄弟之間的原理卻不一樣

2.函式防抖是某一段時間內只執行一次(如5秒內只執行一次,多次觸發重新計時),而函式節流是間隔時間執行(每多少秒內執行一次,無論觸發多少次,按照固定頻率執行)

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

【函式節流】規定在乙個單位時間內,只能觸發一次函式。如果這個單位時間內觸發多次函式,只有一次生效。

/**

* @desc 函式防抖

* @param func 函式

* @param wait 延遲執行毫秒數

* @param immediate true 表立即執行,false 表非立即執行

*/function debounce(func,wait,immediate) , wait)

}else , wait);}}

}

window.onload = function () )

}, 2000);

})}

window.onload = function () )

},2000)}})

}

/**

* @desc 函式節流

* @param func 函式

* @param wait 延遲執行毫秒數

* @param type 1 表時間戳版,2 表定時器版

*/function throttle(func, wait ,type) else if(type===2)

return function()

}else if(type===2), wait)}}

}}

防抖與節流方案 函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式的節流 防抖

函式的節流 預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期 函式防抖 當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間 應用場景 函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次,以優...

函式防抖與節流

因為在寫前端頁面時需要監控滑鼠滾輪,這導致在很短時間內,會觸發很多次函式,造成頁面卡頓堵塞,正巧自己在看github時看到了這個,所以自己記錄一下。函式防抖就是讓某個函式在上一次執行後,滿足等待某個時間內不再觸發此函式後再執行,而在這個等待時間內再次觸發此函式,等待時間會重新計算。underscor...