vue3+ts封装全局节流函数

在Vue3项目中，我们经常需要用到防抖和节流函数来优化性能。本文将介绍如何使用TypeScript来封装一个全局的节流函数。

什么是节流函数

节流函数是一种限制函数执行频率的方法。它可以确保在一定时间内函数只被执行一次，即使它被调用了多次。

为什么需要节流函数

在一些高频率触发的事件中，比如window的resize、scroll事件，频繁地调用函数会导致性能问题。而使用节流函数可以避免这种问题。

封装全局节流函数

在Vue3中，我们可以通过创建一个插件来实现全局的节流函数。首先创建一个Throttle类，它接受一个函数和一个时间间隔作为参数，返回一个函数。

class Throttle {
    
    
  private timer: number | null = null;
  constructor(private fn: () => void, private interval: number) {
    
    }
  public run() {
    
    
    if (this.timer !== null) return;
    this.timer = window.setTimeout(() => {
    
    
      this.fn();
      this.timer = null;
    }, this.interval);
  }
}

然后创建一个插件，将Throttle类挂载到Vue.prototype上。

const throttlePlugin = {
    
    
  install: (app: App) => {
    
    
    app.config.globalProperties.$throttle = (fn: () => void, interval: number) => {
    
    
      const throttle = new Throttle(fn, interval);
      return () => throttle.run();
    };
  },
};

最后在Vue3项目的main.ts中使用插件。

import {
    
     createApp } from 'vue';
import App from './App.vue';
import throttlePlugin from './throttle';

const app = createApp(App);
app.use(throttlePlugin);
app.mount('#app');

现在我们就可以全局使用$throttle函数了。

export default {
    
    
  methods: {
    
    
    handleClick() {
    
    
      this.$throttle(() => {
    
    
        console.log('click event, throttled');
      }, 1000)();
    },
  },
};

在点击事件触发时，$throttle函数返回一个新函数，这个新函数会在1000ms后执行。

总结

本文介绍了如何使用TypeScript来封装一个全局的节流函数，并在Vue3项目中使用它。希望这篇文章对你有所帮助。