微信小程序：防止多次点击多次跳转（函数节流 throttle）

有时候网络抽风的时候，1秒内频繁点击按钮多次，会出现多次的响应的问题，要解决这个问题，可以采取函数节流 throttle的方式。下面演示以下错误的方式和正确(throttle)的方式。

错误的方式

enroll_management.js文件的refreshClick函数监听到了重新录用的点击

// 重新录用
  refreshClick: function (e) {
    var user_id = e.currentTarget.dataset.id;

    console.log(Math.round(Math.random() * 1000) + "----用户id为" + user_id);
    this.setOrderStage(user_id, 2);
    
  },

错误方式的效果截图(1秒内多次执行log)

101.1755233.gif

正确的方式

public.js文件对函数节流(throttle)进行声明和定义

module.exports = {
  throttleFunc: function throttleFunc(func, marginTime) {
    if (marginTime == undefined || marginTime == null) {
      marginTime = 1700
    }
    let lastTime = null
    return function () {
      let currentTime = + new Date()
      if (currentTime - lastTime > marginTime || !lastTime) {
        func.apply(this, arguments)  
        lastTime = currentTime
      }
    }
  },
}

enroll_management.js文件使用函数节流(throttle)

  // 重新录用
  refreshClick: common.throttleFunc(function (e) {
    var user_id = e.currentTarget.dataset.id;

    console.log(Math.round(Math.random() * 1000) + "----用户id为" + user_id);
    this.setOrderStage(user_id, 2);
    
  },1000),

正确方式的效果截图(1秒内只执行1次执行log)

101.1755234.gif