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>