防抖和节流学习记录
防抖和節(jié)流學(xué)習(xí)記錄
說明:以監(jiān)聽屏幕大小改變(resize)demo來演示
function resize(){console.log('調(diào)節(jié)了屏幕的大小') } window.addEventListener('resize', resize)1.防抖和節(jié)流函數(shù)(功能實現(xiàn))
核心:利用閉包存儲一個起始點(用于判斷是否執(zhí)行)
節(jié)流函數(shù):函數(shù)在一段時間內(nèi)多次調(diào)用,經(jīng)過一定時間間隔后才可再一次執(zhí)行(執(zhí)行多次)
防抖函數(shù):函數(shù)在一段時間內(nèi)的多次調(diào)用,僅使得最后一次有效。(一段時間內(nèi)只執(zhí)行一次)
function debounce(func, delay){let timer;return function () {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments)}, delay)} } window.addEventListener('resize', debounce(resize, 3000))效果:改變屏幕大小函數(shù)不執(zhí)行,停止改變屏幕大小后待delay到達后執(zhí)行一次
2.防抖和節(jié)流函數(shù)(進階拓展)
上面的函數(shù)是有一個默認的執(zhí)行時機的防抖是多次觸發(fā)后只執(zhí)行一次;節(jié)流是觸發(fā)后執(zhí)行一次然后隔一段時間才再一次執(zhí)行。那么這個執(zhí)行的時機應(yīng)該給使用者自定義,所以在引入一個immediate,是否立刻執(zhí)行一次
節(jié)流函數(shù):
function throttle(func, delay, immediate){let timer = null;return function() {if(immediate){ // 存在就立馬執(zhí)行func.apply(this, arguments)immediate = false}if(!timer){timer = setTimeout(() => {func.apply(this, arguments) // immediate不存在,delay到了事件再執(zhí)行timer = null}, delay)}else{console.log('上一個定時任務(wù)尚未完成')}} } window.addEventListener('resize', throttle(resize, 3000, false));防抖函數(shù):
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事件,例如輸入后校驗,搜索框返回結(jié)果
節(jié)流:一般在滾動條事件,是否滑倒底部加載更多,100~500ms delay;鼠標(biāo)不斷點擊觸發(fā)
學(xué)習(xí)來源:
掘金作者:大帥老猿;
鏈接:https://juejin.cn/post/6962949488646291486
總結(jié)
- 上一篇: 封装请求 request.js
- 下一篇: vscode 常用插件