代理Page函数

在最近的小程序开发中，遇到这样一个问题。在当前页面点击按钮进行页面跳转时，如果频繁点击按钮，会重复进入下一页面，并且需要多次回退才能回到当前页面。

下面通过一个小案例来分享一下我的解决方案。

上图可以看到，页面存在两个跳转按钮，通过点击按钮来模拟页面跳转的过程。

本想直接为函数增加节流处理，又一想如果存在多个跳转函数，而且还是跳转不同页面，一个个处理节流也太麻烦了。通过查询资料，发现Page函数是可以被重新定义的，ok，就这么搞，下面是实现思路。

1. 编写节流函数
2. 代理Page函数
2. 过滤待处理函数
3. 为函数增加节流

1. 编写节流函数

在utils/utils.js中新增节流函数，代码如下。

/**
 * 节流函数（事件被触发后，n秒之内只执行一次事件处理函数）
 * 
 * @param {*} fn 
 * @param {*} delay 
 * @param {*} processFinall 
 */
function throttle (fn, delay, processFinall = true) {
  let begin = new Date().getTime(),
      t = null;

  return function ()  {
    const cur = new Date().getTime();

    t && clearTimeout(t);

    if (cur - begin >= delay) {
      fn && fn.apply(this, arguments);
      begin = cur;
    } else {
      if (processFinall) {
        t = setTimeout(() => {
          fn && fn.apply(this, arguments);
        }, delay);
      }
    }
  }
}

2. 代理Page函数

index.js 中对Page函数进行代理。

const IndexPage = function (options) {
  // 执行Page函数
  Page.apply(this, arguments);
}

IndexPage({
  handleBtnClick1 () {
    console.log('跳转页面1');
  },
  
  handleBtnClick2 () {
    console.log('跳转页面2');
  }
})

3. 函数增加节流

const { throttle } = require('../../utils/util');

const IndexPage = function (options) {
  // 过滤需要添加节流的函数
  const methods = Object.keys(options).filter(item => item.includes('handle'));
  // 为函数增加节流处理
  methods.forEach(func => options[func] = throttle(options[func], 2000, false));
  // 执行Page函数
  Page.apply(this, arguments);
}

IndexPage({
  handleBtnClick1 () {
    console.log('跳转页面1');
  },
  
  handleBtnClick2 () {
    console.log('跳转页面2');
  }
})

引入工具类中的节流函数，过滤出需要处理的函数，并为函数增加2（时间可自定义）秒的节流处理。

嗯，到目前为止，功能已经完成，再也不怕反复点击跳转按钮啦！！！