多次点击

小程序没有好的优化事件处理机制，导致重复点击会触发多次（当我们快速点击的时候会多次执行，比如点击加载更多，进入下一页面的时候都会出现异常，多次调用，页面也会多次进入，对于体验）

问题来源：

来参加小程序活动详情加载更多用户的时候遇到的

使用 disabled

disabled 的限制比较多，只有对于有button按钮和支持的 disabled 的组件可以使用，使用 disabled 的方式来阻止多次点击在调试工具上可以，但是手机上亲测的情况是还是会有多次点击的情况，主要是因为click事件有250ms的延时，也就是说点击click后会在200ms后执行。所以，使用这个方法在快速点击的情况下还是会出现这样的问题，而且现在的状态为不可点击所以还要解除限制（不是好的可选方案）

配合使用 touch 事件

data里面定义3个属性

touchStartTime: 0, // 触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0 // 最后一次单击事件点击发生时间

页面触发这3个事件

<button
  type='primary'
  bindtap="newTapHandle"
  bindtouchstart="touchStart"
  bindtouchend="touchEnd"
>
  配合touch事件
</button>

methods里面添加3个方法

touchStart(e) {
  console.log(e)
  this.touchStartTime = e.timeStamp;
},
touchEnd(e) {
  console.log(e)
  this.touchEndTime = e.timeStamp;
},
newTapHandle(e) {
  console.log(e);
  // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
  if (this.touchEndTime - this.touchStartTime < 350) {
    // 当前点击的时间
    var currentTime = e.timeStamp;
    var lastTapTime = this.lastTapTime;

    // 更新最后一次点击时间
    this.lastTapTime = currentTime;

    // 如果两次点击时间在250毫秒内，则认为是多次事件
    if (currentTime - lastTapTime > 250) {
      // do something 点击事件具体执行那个业务
      console.log('双击')
      wx.navigateTo({
        url: '/pages/logs/logs',
      })
    }
  }
},

这个方法基本呢个解决我们需要的多次点击问题，通过touch时间的开始和结束的时间间隔，判断点击的状态，但是这个方法还是有个弊端，就是第一次快速点击的时候不会执行里面的方法，而且，要借助touch事件来完成，通用性很差，无疑增加了逻辑的复杂程度。

函数截流

为什么会有函数截流？
在前端 JS 在处理 DOM 的 scroll resize mousemove 等事件会不间断触发。以 scroll 事件为例：

const scrollFn = () => {
    console.log(0)
}

window.onscroll = scrollFn()

打开控制台我们会看在滚动的同时 scrollFn 函数会执行很多次。在操作DOM和其他交互的时候会非常影响性能，为了避免这个问题，我们一般需要使用一个定时器来对函数进行截流。看下面的截流方法

function throttle(method, delay){
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      method.apply(this, arguments);
    }, delay);
  }
}

window.onscroll = throttle(scrollFn(), 250)

其实就是利用 setTimeout 的异步队列和闭包，把需要执行的函数缓存起来，然后在指定的事件后执行。

函数截流: 基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，函数请求停止并超过时间间隔才会执行。

但是这种截流方式在事件不停止的情况下，将永远不会被执行，所以需要对这个截流函数做修改。

function throttle(method, delay, duration){
  const timer = null;
  let begin = new Date();  

  return function() {                
    clearTimeout(timer);

    const current = new Date(); 

    if(current - begin >= duration){
      method.apply(this, arguments);
      begin = current;
    } else {
      timer = setTimeout(() => {
        method.apply(this, arguments);
      }, delay);
    }

  }
}

window.onscroll = throttle(scrollFn, 100, 500);

小程序中在跳转页面的时候多次点击的时候，我们希望它值执行一次,我们看看另一种实现方式不使用 setTimeout 我们不希望它延时执行，我们只是希望在第一次点击后的间隙时间内，只触发一次。

// utils/index.js
export const throttle = (fn, gapTime) => {
  if (gapTime == null || gapTime == undefined) {
    gapTime = 1000
  }

  let _lastTime = null

  // 返回新的函数
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn.apply(this, arguments)   //将this和参数传给原函数
      _lastTime = _nowTime
    }
  }
}

小程序内使用：

<button
  type='primary'
  bindtap='throttleHandle'
>
  使用函数截流
</button>

// click.js
throttleHandle: throttle(function(e) {
  this.goLogs();
}, 250),

推荐使用最后一种方法

小程序多次点击最佳实践