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) // 接收外围函数的参数，丢到防抖函数里，有兴趣的同学也可以了解一下闭包},

目前应用情况就以上两种比较多，喜欢就点点赞吧