防抖和節(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í)行多次）

時間戳

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

定時器

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

demo 效果：執(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é)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。