vue中使用防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

common.js

/*
 * 方法：防抖方法
 * 参数：
 * 		fc：防抖执行的方法
 * 		time：执行防抖方法的时间间隔
 * 		isfront：方法是否先执行，true 先执行防抖方法
 * 
 * */
export function debounce(fc,time,isfront) {
	let timeout;
	return function() {
		if(timeout) {
			clearTimeout(timeout);
		}
		if(isfront) {
			let now = !timeout;
			timeout = setTimeout(() => {
				timeout=false;
			},time);
			if(now) {
				fc.apply();
			}
		}
		else {
			timeout = setTimeout(() => {
				fc.apply();
			},time);
		}
	}
}


export default {
	debounce
}

index.vue

<script>
	import {debounce} from "../assets/js/common.js";
	export default {
		data() {
			methodDebounce: null
		},
		methods: {
			//防抖执行的方法
			handleScroll() {
				console.log("防抖成功~~~");
			}
		},
		mounted() {
			console.log("生命周期：更新！");
			this.methodDebounce = debounce(this.handleScroll,1500,false);
			window.addEventListener('scroll', this.methodDebounce);
		}
	}
</script>