JS节流和防抖的实现思路与具体方式

在说js节流和防抖之前，我们先抛开语言环境，单纯的理解一下节流和防抖是什么意思？节流我们举个例子，比如现在我们面前有个水龙头，我们把水龙头开到最大，水流是不是很快量很多？当我们把水龙头一点一点关小了，水流是不是会变缓慢，最后一滴一滴的滴答，这就是现实生活中的节流。而防抖呢，以前我们用相机拍照，如果被拍的物体或者拍照的人不停的动，拍出来的相片是不是会变得模糊？这就是为啥我们小时合影的时候，喊完茄子，还得等几秒保持笑容不懂，免得照片不清楚嘛~

下面，我们把生活中对于节流和防抖的理解，代入到js中，其实总结一下，这二者都是用来处理高频率事件的，比如我们经常监听的滚轮事件，如果，我们想要实现滚动条滚动到一定的位置时，页面右下角出现“回到顶部”的按钮，那我们就要监听鼠标滚动事件，但是这个事件是高频事件，我们监听它，它里面的方法就会不停的触发，影响浏览器性能，这时候，我们就需要用节流或者防抖的思路，来限制滚动事件触发的频率，以达到提高性能的目的。下面我们来看下在js中，节流和防抖，到时是怎么实现的。

节流：让事件根据一定的时间间隔来执行，就好像关小水龙头阀门，让水一秒滴一滴的样子~

具体代码如下：

//节流（时间戳+定时器）：
var throttle = function(fn, delay) {
	var timer = null;
	var startTime = Date.now();//记录的开始时间
	return function() {
		var curTime = Date.now();//最新时间
		var timeInterval = delay - (curTime - startTime);//时间间隔
		var context = this;
		var args = arguments;
		clearTimeout(timer);
		if (timeInterval <= 0) {
			fn.apply(context, args);
			startTime = Date.now();
		} else {
			timer = setTimeout(fn, timeInterval);
		}
	}
}

function handle() {
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	console.log('滚动条的位置：' + scrollTop);
}
window.addEventListener('scroll', throttle(handle, 3000));

执行效果如下：

防抖：就是让事件在一定的时间间隔内执行，具体示例代码如下：

//防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {
        if(timeout !== null){
			clearTimeout(timeout);
		};
        timeout = setTimeout(fn, wait);    
    };
};
function handle() {    
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条的位置：' + scrollTop);
};
window.addEventListener('scroll', debounce(handle, 3000));

执行效果如下：