节流和防抖

节流和防抖

防抖（debounce）节流（throttle）都是用来控制某个函数在一定时间内执行多次的技巧，两者相似但又不同

函数节流：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

var ids；
window.onscroll = function(){

	if(ids){
		// 判断是否存在函数正在执行，如果在执行中，则直接return
		return;
	}
	ids=setTimeout(function(){
		console.log("函数节流");
		clearTimeout(ids)
	}, 300);
};

函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
 如果空闲，则可以正常触发方法执行。
 如果代码正在执行，则取消这次方法执行，直接return。

函数去抖，让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。两个方法都是用来提升前端性能，减轻浏览器压力。

var ids;
document.getElementById("input1").oninput = function(){
	clearTimeout(ids); // 清除未执行的代码，重置回初始化状态

	ids= setTimeout(function(){//因为有时间延迟，在这期间重复执行就会清除延迟代码，回到初始状态。重新开始
		console.log("函数防抖");
	}, 300);
};

函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
如果计时完毕，没有方法进来访问触发，则执行代码。

不难看出，两者都用到setTimeout 只不过节流的clearTimeout是执行setTimeout之后立马执行，防抖是在执行setTimeout之前执行