vue中使用防抖节流

Posted 2023-04-24

参考技术A 最近项目中有一个购物车中修改商品数量的功能，
因为用户可能点击 加减号的速度很快，为了避免用户每次点击都要调接口，影响性能，所以自己弄了一个防抖节流

思路是 每次点击，在1秒之内，如果没有再次点击，则调用接口， 一秒之内如再次点击，秒数则重新计算

后来在网上搜了一下，发现有好多不一样的方法， 还有一种是引用Lodash库

另外配上lodash官方文档地址 https://www.lodashjs.com/

vue 防抖和节流

vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。

如果某个组件仅使用一次，可以在 methods 中直接应用防抖：

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp(
    methods: 
      // 用 Lodash 的防抖函数
      click: _.debounce(function() 
        // ... 响应点击 ...
      , 500)
    
  ).mount('#app')
</script>

但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 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>
  `
)

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系