移动端预防用户多次点击的几种实现

用户在页面提交某个请求时，会触发页面按钮事件，有时候网络响应慢，用户可能等不急，就会多次点击，在前端没用做预防措施的情况下造成多次发送请求，量大的时候可能会导致服务器奔溃，这篇文章罗列了我做业务时所用到的几种预防措施

对dom添加类

  在以zeptojs、jquery为类库的项目中，简单做法，每次用户第一次点击就对其dom添加某个class,判断dom是否存在此class，存在则直接return,不存在则继续请求，同时页面可以调出一个loading，增加用户点击感知

基于vuex实现请求过滤拦截

  项目中在用vue+vuex+vue-resource技术实现时，采用请求队列去实现，在用户每次请求时，把此请求加入队列中，请求完移除队列，每次请求有个拦截器专门处理是否上次请求还未结束，未结束则移除队列后再请求，🌰

 //vue-resource 拦截器
 import Vue from 'vue'
 import VueResource from 'vue-resource'
 import store from 'components/common/store'
 
 Vue.http.interceptors.push(function(request, next) {
  request.timeout = 5000
  store.commit('addPendingRequest', request);
  next(function(response) {
   store.commit('removePendingRequest', request)
  })
 })
//store
export const state = {
 pendingRequests: [] 
};
export const mutations = {
  addPendingRequest(state, request) {
   state.pendingRequests.push(request)
},
removePendingRequest(state, request) {
  let pos = state.pendingRequests.indexOf(request)
   if(pos != -1) {
     state.pendingRequests.splice(pos, 1)
   }
}，
tryAbortRequest(state, url) {
   let requests = state.pendingRequests
   let len = requests.length
   while(len--) {
     if(requests[len].url.indexOf(url) != -1) {
       requests[len].abort();//abort请求
       requests.splice(len, 1);
     }
   }
 }
};
export const actions = {
 fetchMyAwards({commit}, context) { 
   return request(context,url,mutation)
 }
}
function request(context, url, mutation) {
 context.$store.commit('tryAbortRequest', url)
 //逻辑处理 return promise
}

EventEmitter

  事件队列,在vue项目中，例如：针对页面初始事件，在mounted中挂载事件，beforeDestroy中移除事件
npm
源码分析

import EventEmitter from 'eventemitter3'
import Enum from '../../common/enum'
let emitter = new EventEmitter()
export default {
  mounted() {
    emitter.on(Enum.INTERFACE_EVENT.UPDATE_TIMES,() => {
      //todo

    })
    emitter.emit(Enum.INTERFACE_EVENT.UPDATE_TIMES)
  },
  beforeDestroy() {
    emitter.removeAllListeners(Enum.INTERFACE_EVENT.UPDATE_TIMES)
  }
}