Vue中的防抖与节流

---

前言

大家好，今天和大家讲讲Vue中的防抖与节流

---

一、防抖是什么？

防抖（debounce）： 是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。

二、节流是什么？

函数节流（throttle） 是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

三、具体实现

1.安装

1. yarn add lodash

2. npm i lodash --save

2.导入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>
  `
})

总结

以上就是本章的全部内容，希望能够帮助到您。