封装vue指令-防抖节流
防抖:每次触发都是一次重新计时
节流: 时间内只会触发一次
防抖
const debounce = { inserted(el,binding) { let timer; el.addEventListener('click', ()=>{ const arg = binding.arg; #### 每次点击都清除定时器,但是不会清空timer的值 if (timer) clearTimeout(timer); if (arg === 'immediate') { const now = !timer; timer= setTimeout(()=>{ timer = null; },1000); // 如果timer为空的话,会执行点击事件的内容 if (now) { binding.value(); } } else { timer = setTimeout(()=>{ binding.value(); },1000) } }) } }
节流
const throttle = { inserted(el,binding) { let timer; el.addEventListener('click', ()=>{ let timer; if (timer) return; timer = setTimeout(()=>{ binding.value(); timer = null; },1000) }) } }