请问有没有办法用vue或者原生JS将多个页面统一进行防止重复执行点击事件(在不侵入源事件方法的前提下,因为页面太多是在改不过来),或者进行统一节流处理
如果点击事件都有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)
})
或者将问题阐述具体一些。
路由页都无法重复点击
你是说,整个项目里的事件都做一个,防止重复点击的,操作?那应该没有,点击事件,无法预知到,也不可能,统一处理
防止重复点击点击后禁用就行啊