JavaScript中函数的节流和防抖

函数的节流

什么是函数的节流
当一个函数执行一次后，只有在大于设定周期后才会执行第二次。
通俗点儿说，就是有个需要频繁触发的函数，处于优化性能的角度，在规定时间内，之让函数触发的第一次生效，后面的不生效
具体代码如下

//js部分代码
function throttle(fn,delay){
	//fn() 需要节流的函数
	//delay 规定的时间
	
	var lastTime = 0;
	//记录上一次触发的时间
	
	return function(){
	
		var nowTime = Date.now();
		//记录当前触发的时间
		
		if(nowTime - lastTime>delay){
		//判断两次触发时间差是否大于规定值
		
		fn.call(this);
		//call改变this指向，使this指向这个函数
		
		lastTime = nowTime;
		//同步时间
		}
	}
}
document.onscroll = throttle(function(){console.log('scroll事件别触发了'+Date.now());},200);

//css部分
<style>
	html,body{
	height:500%;
	//横向的滚动条
	}
</style>

函数的防抖

一个需要频繁触发的函数，在规定的某个时间，只让最后一次生效，也就是延时执行。

//js部分
function debounce(fn,delay){
	var timer = null;
	//设置延时器
	
	return function(){
	
		clearTimeout(timer);
		//清除上一次的延时器

		//重新设置新的延时器
		timer = setTimeout(function(){
			fn.apply(this);
		},delay);
	}
}
 document.getElementById('btn').onclick = debounce(function(){console.log('点击事件被触发了'+Date.now())},1000);

//html
<button id="btn">点击</button>