函数的节流 - JavaScript实现

函数的节流 - JavaScript实现

函数的节流（throttle）

一. 定义
对于持续触发的事件，规定一个时间间隔，每隔一段时间只能触发一次。

二. 实现

1. 在每个时间段的开始执行函数 - 时间戳实现

   function throttleByStamp (fn, wait) {
   	const preTime = 0;
   	return function() {
   		const context = this;
   		const args = arguments;
   		const currentTime = new Date().valueOf();
   		if (currentTime - preTime > wati) {
   			fn.apply(context, args);
   			preTime = currentTime;
   		}
   	}
   }
   

2. 在每个时间段的结束执行函数 - 定时器实现

   function throttleByTimer (fn, wati) {
   	let timer = null;
   	return function() {
   		const context = this;
   		const args = arguments;
   		if (!timer) {
   			timer = setTimeout(() => {
   				fn.apply(context, args);
   				timer = null;
   			}, wait);
   		}
   	}
   }
   

3. 两者结合

function throttle(fn, wait, immediate = false) {
	let timer = null;
	let preTime = 0;
	return function() {
		const context = this;
		const args = arguments;
		if (immediate) { // 每个时间段开始执行函数
			let currentTime = new Date().valueOf();
			if (currentTime - preTime > wait) {
				fn.apply(context, args);
				preTime = currentTime;
			}
		} else { // 每个时间段结束执行函数
			if (!timer) {
				timer = setTimeout(() => {
					fn.apply(context, args);
					timer = null;
				}, wait);
			}
		}
	}
}

三. 函数节流的作用
针对调用频率高的函数节流，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。