自定义指令实现防抖和节流

最新推荐文章于 2023-04-21 09:47:56 发布

Cyve_

最新推荐文章于 2023-04-21 09:47:56 发布

阅读量244

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Cyve_/article/details/125208157

版权

本文介绍了如何在Vue中实现防抖和节流技术。防抖通过限制函数的执行频率，确保在一定时间间隔后才执行，而节流则在设定的时间间隔内仅允许执行一次。示例代码展示了如何在Vue指令中应用这些技术，以控制元素的点击事件，防止过度触发。同时，还讨论了如何使用CSS的pointer-events属性来禁用按钮元素。

摘要由CSDN通过智能技术生成

防抖：

Vue.directive('debounce', {
  inserted: function(el, binding) {
    let timer;
    el.addEventListener("click", () => {
      if (timer) {
        clearTimeout(timer);
      }
        timer = setTimeout(() => {
          // 执行函数
            binding.value();
          }, 500);
    });
  }
})

节流：

Vue.directive('throttle', {
  inserted(el, bind){
       el.addEventListener('click', function() {
         let isFalse= false
           if (!isFalse) {
               isFalse = true
               el.style.pointerEvents = 'none';
             setTimeout(() => {
               el.style.pointerEvents = 'auto';
               isFalse = false
             }, 1000);
        }
     })
   }
})

div经常会被用来做按钮，有时候我们需要禁用按钮，让它不可被点击，一般我们会想到用disabled属性：el.disabled=true来禁用元素，但是这个属性只对button有用，所以我们可以用CSS的pointer-events:none来控制元素是否禁用