小程序列表循环中使用独立lodash防抖

列表循环中使用lodash的防抖功能时，关键是要确保每个列表项（或每个需要防抖的事件）都有其独立的防抖函数实例。这样，当用户快速触发相同或不同的列表项上的事件时，每个列表项的防抖逻辑都是独立运行的，互不影响。

如果列表项可能会被删除，你也应该在删除逻辑中取消对应的防抖函数，以避免内存泄漏,不过在组件beforeDestroy生命周期钩子中取消了所有防抖函数，这通常已经足够了

<template>  
  <view>
    <view v-for="(item, index) in items" :key="item.id">
    	<button type="default" class="common-mini-btn-blank" @click="createDebounced(item.id)">退款</button>
    </view>  
  </view>  
</template>  
  
<script>  
import _ from 'lodash';  
export default {  
  data() {  
    return {  
      // 列表数据  
      items: [  
        { id: 1, name: '项目1' },  
        { id: 2, name: '项目2' },  
        { id: 3, name: '项目3' }  
      ],  
      // 存储每个item的防抖函数  
      debounceFunctions: {}  
    };  
  },  
  methods: {  
    // 创建一个防抖函数并绑定到点击事件上  
    // 如果该item的防抖函数已存在，则直接返回；否则，创建一个新的  
    createDebounced(itemId) {
      if (!this.debounceFunctions[itemId]) {  
        this.debounceFunctions[itemId] = _.debounce((id) => {  
          this.refundFn(id);  
        }, 500, { leading: false, trailing: true });  
      }  
      // 调用防抖函数，并传入itemId  
      this.debounceFunctions[itemId](itemId);  
    }  
  },
  // 实际的处理函数  
  refundFn(itemId) {  
    console.log('--退款--',itemId);
    // 这里可以添加更多处理逻辑，如API调用等  
  },  
  // 组件销毁时取消所有防抖函数  
  beforeDestroy() {
    Object.values(this.debounceFunctions).forEach(func => {  
      func.cancel();  
    });  
  }  
};  
</script>