debounce防抖函数的使用

debounce防抖函数的使用

说明：
1.首页有30多张图片，每次图片加载完都要执行一个refresh的函数，由于执行次数过多，对refresh函数进行防抖
2.图片位于组件goodsitem.vue中，需要发送事件给home.vue

步骤：

1. 创建一个utils.js文件封装debounce函数

//func为要执行的函数（要防抖的），delay为防抖的毫秒数，在该毫秒数内的函数会被合并掉
export function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) { clearTimeout(timer) }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
};

2.当goodsitem.vue组件中的图片加载完时，发送事件给组件home.vue（父子组件就直接发送，不需要总线）

<template>
  <div class="goods-list-item" >
    <img src="imgsrc" @load="imgLoad" />
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  methods: {
  //每一张图片加载完时发送事件
    imgLoad() {
      this.$bus.$emit("imgLoad");
    } 
  }
}
</script>

3. 首页home.vue接收事件，执行防抖，注意要定义一个refresh来保存debounce(this.$refs.scroll.refresh, 500)，然后调用this.refresh()，直接使用debounce函数的话就会创建多个对象，就没防抖了

<script>
import { debounce } from "common/utils.js";

export default {
  name: "Home",
  data() {
    return {
      refresh: null,
      itemImgListener: null,
    };
  },
  mounted() {
    this.refresh = debounce(this.$refs.scroll.refresh, 500);
    this.itemImgListener = () => {
      this.refresh();
    };
    this.$bus.$on("imgLoad", this.itemImgListener);
  }
};
</script>

4. 如果是父子组件的话，子组件this.$emit(‘imgLoad’)，父组件接收@imgLoad = “imgLoad”，然后在methods中定义

<script>
import { debounce } from "common/utils.js";

export default {
  name: "Home",
  data() {
    return {
      refresh: null,
      itemImgListener: null,
    };
  },
  mounted() {
    this.refresh = debounce(this.$refs.scroll.refresh, 500);
  },
  methods:{
 	 imgLoad(){
 		this.refresh()
  	}
  }
};
</script>