前端页面操作防抖函数封装及应用

1、使用背景

函数防抖其实是作为一名前端同学必备的技能了，之前一直偷懒都借用页面loading或者按钮loading来实现。最近在开发微信小程序，过多的loading会带来不好的体验，同时在跳转页面的时候，不好用loading来防抖。所以就会出现连续连击多次会切一个页面多次的情况，所以只得使用防抖函数来实现了。

2 、代码实现

话不多说，直接上代码

/* 防抖函数封装 */
let timer
export const debounce = (fn, delay = 500) => {
  return  (...args) => { // 传入形参！！！
      let that = this
      timer && 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) // 接收外围函数的参数，丢到防抖函数里，有兴趣的同学也可以了解一下闭包
 },

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