关于防抖节流

37 阅读1分钟

封装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) }) } }