粗解javascript中的函数节流和函数防抖

参考资料

感觉这里面讲的挺详细的：
https://www.cnblogs.com/walls/p/6399837.html

我自己的理解

1.函数节流

当事件被频繁触发时，在一定的时间内（假设时300ms）只会执行一次事件内需要执行的任务，也就是说，假如你在600ms内触发了多次这个事件，实际上它只会执行两次任务。

1.1示例代码

函数节流多数会在onresize，scroll，mousemove ,mousehover时候会用到。因为这些事件是会高频触发的事件。以下是示例代码：

// 函数节流 监听页面元素滚动
var canRun = true;
document.getElementById("throttle").onscroll = function(){
	if(!canRun){
		// 判断是否已空闲，如果在执行中，则直接return
		return;
	}

	canRun = false;
	setTimeout(function(){
		console.log("函数节流");
		canRun = true;
	}, 300);
};

//函数节流 监听页面元素鼠标移动
var flag = true;
	$('.recruit li').on('mousemove',function(){
		if(flag == true){
		    flag = false;
		    var timer = setTimeout(function(){
				flag = true;
				console.log('函数节流');
			},300);
		}
		 
	});

1.2要点

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

2.函数防抖

当事件被频繁触发，只有在触发间隔时间大于某个时间（假设300ms）时，任务才会执行，也就是说，假如你不断触发一个事件并且每次间隔小于300ms（假设）时，事件内的任务是不会被执行的，这时候你停下来不再触发的话，就会执行一次这个任务，在你整个触发过程中，实际任务只被触发了一次。

2.1示例代码

应用场景：判断输入的用户名是否规范，输入框输入之后会调用接口，检测输入信息是否规范。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，获取输入完毕时输入框的信息，然后检测是否规范。
以下是示例代码：

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
	clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

	timer = setTimeout(function(){
		console.log("函数防抖");
	}, 300);
};	

2.2要点

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

函数防抖的实现重点，就是巧用setTimeout做缓存池，而且可以轻易地清除待执行的代码。

为什么需要函数节流和函数防抖

此段节选自link

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。