vue3实现节流函数

在Vue3中实现节流函数可以借助于JavaScript中的节流函数。以下是一个实现Vue3中节流函数的例子：

// 在Vue3中使用节流函数
const throttle = (fn, delay) => {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => (timer = null), delay);
      return fn.apply(this, args);
    }
  };
};

// 在Vue3组件中使用节流函数
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    // 使用节流函数处理input事件
    handleInput: throttle(function (event) {
      this.inputValue = event.target.value;
    }, 1000),
  },
};

在上面的例子中，我们定义了一个名为`throttle`的节流函数，它接受两个参数：要封装的函数`fn`和延迟时间`delay`。函数返回一个新的函数，这个新函数在被调用时会检查是否已经存在定时器，如果不存在，就设置一个新的定时器，并调用原始函数。如果已经存在定时器，则不再调用原始函数。

在Vue3组件中，我们可以使用`throttle`函数来处理`input`事件，以避免频繁触发事件导致性能问题。在上面的例子中，我们使用`throttle`函数处理`handleInput`方法，将其变成一个节流函数，每隔1秒钟才会执行一次。