【Vue】自定义指令函数节流和防抖

最新推荐文章于 2025-12-03 11:05:25 发布

原创最新推荐文章于 2025-12-03 11:05:25 发布 · 36 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

本文深入探讨了前端开发中用于性能优化的两种重要技术——节流和防抖。通过实例解析了它们的工作原理及应用场景，帮助开发者更有效地管理事件监听，提升用户体验，减少不必要的计算和渲染，尤其是在处理高频输入事件如滚动、输入等时显得尤为重要。

节流

directives: {
    // 自定义指令
    throttle: {
      inserted: function(el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function() {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function() {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  },