vue3实现防抖和节流

安装Lodash

 yarn add lodash
 npm install lodash --save

导入Lodash

<template>
  <button @click="btnClick">节流</button>
  <button @click="btnClick2">防抖</button>
</template>

<script>
import _ from "lodash";

export default {
  name: "",
  setup() {
    // 节流
    const btnClick = _.debounce(function() {
      // ....
      console.log('节流');
    }, 2000);
    // 防抖
    const btnClick2 = _.throttle(function() {
      // ....
      console.log('防抖');
    }, 2000);
    return {
      btnClick,
      btnClick2,
    };
  },
};
</script>

<style scoped></style>

这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数:

app.component('save-button', {
  created() {
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 响应点击 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})