vue 节流throttling防抖debounce

节流和防抖常用与监听滚动事件，移动事件，窗口改变大小事件，输入事件等高频触发事件，当事件处理函数较为复杂时，将导致无法实时响应，降低用户体验度，影响效率，出现页面卡顿，假死等现象。

debounce 周期内有新事件触发，清除旧定时器，重置新定时器；这种方法，需要高频的创建定时器。

throttling 周期内有新事件触发时，重置定时器开始时间撮，定时器执行时，判断开始时间撮，若开始时间撮被推后，重新设定延时定时器。

 

1.定义模块文件并导出防抖函数和节流函数

/**
 * 防抖函数
 * fu 延时调用函数
 * delay 延迟多长时间
 */
export const _debounce = (fn, delayTime) => {
	let delay = delayTime || 200;
	let timer;
	return function() {
		let th = this;
		let args = arguments;
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			timer = null;
			fn.apply(th, args);
		}, delay);
	};
};

/**
 * 节流函数
 * fu 延时调用函数
 * delay 延迟多长时间
 * atleast 至少多长时间触发一次
 */
export const _throttle = (fn, delay, atleast) => {
	let timer = null
	let previous = null
	return function() {
		let now = +new Date()
		if (!previous) previous = now
		if (atleast && now - previous > atleast) {
			fn()
			previous = now
			clearTimeout(timer)
		} else {
			clearTimeout(timer)
			timer = setTimeout(function() {
				fn()
				previous = null
			}, delay)
		}
	}
};

2.在组件中导入函数

	import {
		_throttle,
		_debounce
	} from '@/common/config/debThr.js';

3.methods中调用

methods: {
			_throttle,
			_debounce,
			querySearchAsync() {
				this._debounce(this.testFun, 1000)()
			},
			handleSelect(item) {
				console.log(item);
			},
			testFun() {
				console.log('输入框触发了：' + `${this.count++}...${this.test}`, new Date());
			}
}

4.模版