// 實現 1// fn 是需要防抖處理的函數// wait 是時間間隔function debounce(fn, wait = 50) {// 通過閉包緩存一個定時器 idlet timer = null// 將 debounce 處理結果當作函數返回// 觸發事件回調時執行這個返回函數return function(...args) {// 如果已經設定過定時器就清空上一次的定時器if (timer) clearTimeout(timer)// 開始設定一個新的定時器，定時器結束后執行傳入的函數 fntimer = setTimeout(() => {fn.apply(this, args)}, wait)}}// DEMO// 執行 debounce 函數返回新函數const betterFn = debounce(() => console.log('fn 防抖執行了'), 1000)// 停止滑動 1 秒后執行函數 () => console.log('fn 防抖執行了')document.addEventListener('scroll', betterFn)

// 實現 2// immediate 表示第一次是否立即執行function debounce(fn, wait = 50, immediate) {let timer = nullreturn function(...args) {if (timer) clearTimeout(timer)// ------ 新增部分 start ------ // immediate 為 true 表示第一次觸發后執行// timer 為空表示首次觸發if (immediate && !timer) {fn.apply(this, args)}// ------ 新增部分 end ------ timer = setTimeout(() => {fn.apply(this, args)}, wait)}}// DEMO// 執行 debounce 函數返回新函數const betterFn = debounce(() => console.log('fn 防抖執行了'), 1000, true)// 第一次觸發 scroll 執行一次 fn，后續只有在停止滑動 1 秒后才執行函數 fndocument.addEventListener('scroll', betterFn)

// fn 是需要執行的函數// wait 是時間間隔const throttle = (fn, wait = 50) => {// 上一次執行 fn 的時間let previous = 0// 將 throttle 處理結果當作函數返回return function(...args) {// 獲取當前時間，轉換成時間戳，單位毫秒let now = +new Date()// 將當前時間和上一次執行函數的時間進行對比// 大于等待時間就把 previous 設置為當前時間并執行函數 fnif (now - previous > wait) {previous = nowfn.apply(this, args)}}}

// fn 是需要節流處理的函數// wait 是時間間隔function throttle(fn, wait) {// previous 是上一次執行 fn 的時間// timer 是定時器let previous = 0, timer = null// 將 throttle 處理結果當作函數返回return function (...args) {// 獲取當前時間，轉換成時間戳，單位毫秒let now = +new Date()// ------ 新增部分 start ------ // 判斷上次觸發的時間和本次觸發的時間差是否小于時間間隔if (now - previous < wait) {// 如果小于，則為本次觸發操作設立一個新的定時器// 定時器時間結束后執行函數 fn if (timer) clearTimeout(timer)timer = setTimeout(() => {previous = nowfn.apply(this, args)}, wait)// ------ 新增部分 end ------ } else {// 第一次執行// 或者時間間隔超出了設定的時間間隔，執行函數 fnprevious = nowfn.apply(this, args)}}}// DEMO// 執行 throttle 函數返回新函數const betterFn = throttle(() => console.log('fn 節流執行了'), 1000)// 第一次觸發 scroll 執行一次 fn，每隔 1 秒后執行一次函數 fn，停止滑動 1 秒后再執行函數 fndocument.addEventListener('scroll', betterFn)

// 此處的三個參數上文都有解釋_.debounce = function(func, wait, immediate) {// timeout 表示定時器// result 表示 func 執行返回值var timeout, result;// 定時器計時結束后// 1、清空計時器，使之不影響下次連續事件的觸發// 2、觸發執行 funcvar later = function(context, args) {timeout = null;// if (args) 判斷是為了過濾立即觸發的// 關聯在于 _.delay 和 restArgumentsif (args) result = func.apply(context, args);};// 將 debounce 處理結果當作函數返回var debounced = restArguments(function(args) {if (timeout) clearTimeout(timeout);if (immediate) {// 第一次觸發后會設置 timeout，// 根據 timeout 是否為空可以判斷是否是首次觸發var callNow = !timeout;timeout = setTimeout(later, wait);if (callNow) result = func.apply(this, args);} else {// 設置定時器timeout = _.delay(later, wait, this, args);}return result;});// 新增 手動取消debounced.cancel = function() {clearTimeout(timeout);timeout = null;};return debounced;};// 根據給定的毫秒 wait 延遲執行函數 func_.delay = restArguments(function(func, wait, args) {return setTimeout(function() {return func.apply(null, args);}, wait);});