防抖
export const debounce = (() => { let timer = null return (callback, wait = 800) => { timer&&clearTimeout(timer) timer = setTimeout(callback, wait) } })()
示例:
如 vue 中使用
methods: { loadList() { debounce(() => { console.log('加载数据') }, 500) } }
第二种-按钮防抖
1、引入main.js根文件中
// 自定义指令 click事件 防抖动 Vue.directive("debounce", { bind(el, binding) { const delay = binding.value ? binding.value : 1500; el.addEventListener("click", (e) => { el.classList.add("is-disabled"); el.disabled = true; setTimeout(() => { el.disabled = false; el.classList.remove("is-disabled"); }, delay); }); } });
示例:
如 vue 中使用
<el-button type="primary" v-debounce=“3000” @click="doSave" >确定</el-button>