关于#javascript#的问题：防止重复点击

Question

请问有没有办法用vue或者原生JS将多个页面统一进行防止重复执行点击事件（在不侵入源事件方法的前提下，因为页面太多是在改不过来），或者进行统一节流处理

Answer 1

如果点击事件都有axios请求，你防止的是重复的后端请求，如果是vue单页面项目可以考虑如下的方案：
1，取消重复请求，具体方法如下，基本思路是缓存，请求结束之后清空缓存

/**
 * 全部请求拦截器处理
 */
const pendingRequests = new Map()

myAjax.interceptors.request.use(function (config) {
  const params = config.params || config.data
  const requestKey = `${config.url}/${JSON.stringify(params)}&request_type=${config.method}`

  if (pendingRequests.has(requestKey)) {
    config.cancelToken = new axios.CancelToken((cancel) => {
      // cancel 函数的参数会作为 promise 的 error 被捕获
      cancel(`重复的请求被主动拦截: ${requestKey}`)
    })
  } else {
    pendingRequests.set(requestKey, config)
    config.requestKey = requestKey
  }
  return config
},
function (error) {
  pendingRequests.clear()
  return Promise.reject(error)
}
)
/**
 * 响应拦截器
 */
myAjax.interceptors.response.use(response => {
  const requestKey = response.config.requestKey
  pendingRequests.delete(requestKey)
  return response
}, error => {
  pendingRequests.clear()
  return Promise.reject(error)
})

或者将问题阐述具体一些。