1、使用背景

函數防抖其實是作為一名前端同學必備的技能了，之前一直偷懶都借用頁面loading或者按鈕loading來實現。最近在開發微信小程序，過多的loading會帶來不好的體驗，同時在跳轉頁面的時候，不好用loading來防抖。所以就會出現連續連擊多次會切一個頁面多次的情況，所以只得使用防抖函數來實現了。

2 、代碼實現

話不多說，直接上代碼

/* 防抖函數封裝 */
let timer
export const debounce = (fn, delay = 500) => {return  (...args) => { // 傳入形參！！！let that = thistimer && clearTimeout(timer)timer = setTimeout(function () {console.log("防抖函數執行", args)fn.apply(that, args) // 用apply指向調用debounce的對象，相當于this.fn(args);}, delay)}
}

我也看了很多別的同學寫的封裝函數，要么就是不接收形參，導致外面的參數在防抖函數里面無法拿到，要么就是將定時器定義丟在函數里面，導致每次點擊都會重新定義定時器，但是并沒有達到清除定時器的目的。

3、實際應用

3.1實現頁面跳轉防抖

export function goPage(url) {debounce((url) => {url && wx.navigateTo({ url })})(url)
}// 頁面調用
goPage('.pages/home/index')

3.2 頁面交互防抖實現

gotoShop(value) {debounce((value) => {// 接收外部傳來的value參數，進行后續邏輯處理})(value) // 接收外圍函數的參數，丟到防抖函數里，有興趣的同學也可以了解一下閉包},

目前應用情況就以上兩種比較多，喜歡就點點贊吧