Vue通过lodash实现节流与防抖

Vue通过lodash实现节流与防抖

​ 什么是节流与防抖呢？

• 节流：高频事件触发时，无论触发多少次，n秒内只会执行一次。（节流会稀释函数的执行频率）
  • 理念：每次触发事件时都判断当前是否有等待执行的函数
• 防抖：触发高频事件后，在n秒内只会触发一次，如果n秒内高频事件再次被触发，则重新计算时间。
  • 理念：每次触发事件时都要取消之前的延时调用方法

​ Vue中没有内置防抖和节流，但可以使用Lodash库来实现。

安装Lodash

npm install lodash --save

yarn add lodash

防抖与节流demo

<template>
  <div>
    <button @click="btnclick">防抖</button>
    <button @click="btnclick2">节流</button>
  </div>
</template>

<script>

import _ from "lodash";

export default {
  name: "Home",
  data() {
    return {}
  },

  setup() {
    const btnclick = _.debounce(function () {
      console.log("防抖")
    }, 2000);
    const btnclick2 = _.throttle(function () {
      console.log("节流")
    }, 2000);
    return {
      btnclick,
      btnclick2,
    }
  },


}
</script>

<style scoped>

</style>

注

​ 上面的使用方法对于可复用组件有潜在的问题。因为他们都共享相同的防抖函数。

​ 为了使组件实例彼此独立，可以在生命周期钩子的created里面添加防抖函数

<template>
  <div>
    <button @click="btnclick3">防抖</button>
  </div>
</template>

<script>

import _ from "lodash";

export default {
  name: "Home",
  data() {
    return {}
  },
  created() {
    this.btnclick3 = _.debounce(this.click, 1000)
  },
  unmounted() {
    this.btnclick3.cancel()
  },
  methods: {
    click() {
      console.log("防抖")
    }
  }


}
</script>

<style scoped>

</style>