vue 封装节流 详细代码讲解

当使用Vue开发应用时，我们有时需要对一些频繁触发的事件进行节流操作，以减少资源的浪费。下面是一个封装节流的代码示例：

// throttle.js

export default function throttle(fn, delay) {
  let timer = null;

  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

上述代码是一个简单的节流函数封装，接受两个参数：要执行的函数 `fn` 和延迟时间 `delay`。它返回一个新的函数，该函数在延迟时间内只会执行一次 `fn`。

接下来，我们可以在Vue组件中使用这个节流函数。假设我们有一个搜索框组件，需要对用户输入进行节流处理：

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleSearch" />
  </div>
</template>

<script>
import throttle from './throttle';

export default {
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    handleSearch: throttle(function() {
      // 在这里执行搜索逻辑
      console.log('搜索：', this.keyword);
    }, 500),
  },
};
</script>

在上述代码中，我们引入了之前封装的节流函数 `throttle`，并将其作为 `handleSearch` 方法的包装函数。这样，当用户输入时，`handleSearch` 方法将在延迟时间内只执行一次，避免了频繁的搜索操作。

这就是一个简单的Vue节流函数封装示例。通过封装节流函数，我们可以在需要的地方方便地使用节流操作，提高应用的性能和用户体验。