童鞋们,有人的地方就会有江湖,有表单的地方就会有“防抖”,相信大家都碰到过这个问题,都有哪些方法呢?
方法一:定时器
// 节流,接受一个函数和延迟执行的时间作为参数,多次操作后仅执行最后一次操作debounce (fn, delay = 1500) { clearTimeout(debounceTimer)// 维护一个timer debounceTimer = setTimeout(function () { fn() clearTimeout(debounceTimer) }, delay)}
方法二:拦截器(一劳永逸解决)
const _axios = axios.create(config)let pending = []let CancelToken = _axios.CancelTokenlet removePending = (config) => { for (let i in pending) { if (pending[i].url === config.url) { pending[i].cancel() pending.splice(i, 1) } }}_axios.interceptors.request.use(config => { removePending(config) config.cancelToken = new CancelToken((v) => { pending.push({ url: config.url, cancel: v }) }) return config}, error => { return Promise.reject(error)})
这是我项目中“防抖”的解决方法,当然还有好多,比如“函数时间戳”,”写自定义指令“等,欢迎童鞋们补充!