当前位置：首页 > VUE

vue实现节流

2026-01-07 19:27:11VUE

vue实现节流的方法

在Vue中实现节流（throttle）功能，通常用于限制高频事件的触发频率，例如滚动、输入或按钮点击。以下是几种常见的实现方式：

使用Lodash的throttle函数

安装Lodash库后，可以直接使用其内置的throttle方法：

import { throttle } from 'lodash';

export default {
  methods: {
    handleScroll: throttle(function() {
      // 处理滚动逻辑
    }, 300)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

自定义节流函数

可以自行实现一个简单的节流函数：

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

export default {
  methods: {
    handleClick: throttle(function() {
      // 处理点击逻辑
    }, 1000)
  }
}

使用Vue自定义指令

创建一个全局节流指令：

Vue.directive('throttle', {
  inserted(el, binding) {
    let timer = null;
    el.addEventListener('click', () => {
      if (!timer) {
        timer = setTimeout(() => {
          binding.value();
          timer = null;
        }, binding.arg || 500);
      }
    });
  }
});

// 使用方式
<button v-throttle:1000="handleClick">节流按钮</button>

使用Vue的修饰符方式

扩展Vue的修饰符功能：

Vue.config.keyCodes.throttle = 32; // 可选，设置特定键码

Vue.prototype.$throttle = function(fn, delay) {
  let canRun = true;
  return function(...args) {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, args);
      canRun = true;
    }, delay);
  };
};

// 使用方式
<button @click="$throttle(handleClick, 1000)">节流按钮</button>