JavaScript中的防抖和节流

说一说JavaScript中的防抖和节流， 其实就是setTimeout和setInterval的用法

1. 防抖

在用户高频触发一个事件的时候，我们不是让函数立即执行，而是看一下在下一个我们规定的时间用户还会不会继续去执行去触发这个事件

是 ? 等待 : 调用事件

下面写一个伪代码，怕我是不想写的, 所以复制了一个

// 增加前缘触发功能
var debounce = (fn, wait, immediate = false) => {
	let timer, startTimeStamp = 0;
	let context, args;
 
	let run = (timerInterval)=>{
		timer = setTimeout(()=>{
			let now = (new Date()).getTime();
			let interval = now - startTimeStamp
			// the timer start time has been reset，so the interval is less than timerInterval
			if(interval < timerInterval){ 
				console.log('debounce reset', timerInterval-interval);
				startTimeStamp = now;
				run(timerInterval - interval);  // reset timer for left time 
			} else { // 超过wait时间 执行函数
				if(!immediate){
					fn.apply(context, args);
				}
				clearTimeout(timer);
				timer = null;
			}
			
		}, timerInterval);
	}
 
	return function(){
		context = this;
		args = arguments;
		let now = (new Date()).getTime();
		startTimeStamp = now; // set timer start time
 
		if(!timer){
			console.log('debounce set',wait);
			if(immediate) {
				fn.apply(context, args);
			}
			run(wait);    // last timer alreay executed, set a new timer
		}	
	}
}

2. 节流
   什么是节流呢?就是在规定的时间内只执行一次

不出意外下面这个方法也是赋值粘贴的

// 增加前缘
var throttling = (fn, wait, immediate) => {
	let timer, timeStamp = 0;
	let context, args;
 
	let run = () => {
		timer = setTimeout(()=>{
			if(!immediate){
				fn.apply(context,args);
			}
			clearTimeout(timer);
			timer = null;
		}, wait);
	}
 
	return function () {
		context = this;
		args = arguments;
		if(!timer){
			console.log("throttle, set");
			if(immediate){
				fn.apply(context,args);
			}
			run();
		} else {
			console.log("throttle, ignore");
		}
	}
 
}

具体的实现可以参考lodash中的实现