防抖与节流

在前端中会遇到一些频繁的事件触发，比如：
1、window的resize、scroll
2、mousedown、mousemove
3、keyup、keydown
等等
为了解决这个问题，一般有两种解决方案：

debounce 防抖
应用场景：

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

throttle 节流
应用场景：

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 谷歌搜索框，搜索联想功能

• 高频点击提交，表单重复提交

防抖

触发一个事件，在事件触发n秒后才执行，如果在事件触发的n秒内又触发了这个事件，那么就以最新触发事件的时间为准，n秒后再执行。总之，就是等触发完时间n秒内不再触发时间，才执行

function debounce(func, wait){

	var timeout;// 创建一个标记用来存放定时器的返回值
	
	return function(){
	
		clearTimeout(timeout);// 每当用户输入的时候把前一个 setTimeout clear 掉
		
		// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
		timeout = setTimeout(function(){
			func.apply(this, arguments)//args就是用于接收上一级的参数的this相当于占位符
		},wait);
	}
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

节流

如果持续触发事件，一段时间内，只执行一次事件，以最开始触发事件的时间为准。

节流实现：时间戳、定时器

1、时间戳
当触发事件时，我们取出当前的时间戳，然后减去之前的时间戳（最开始值为0），如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于就不执行

function throttle(func, wait){
	var context,args,
	var pervious = 0;
	return function(){
		var now = Date.now();
		context = this;
		args = arguments;
		if(now - previous > wait){
			func.apply(context,args);
			//不加apply时，handle函数this指向全局window，
			//加上apply显示绑定this值（input对象）到 handle函数里面去
			previous = now;
		}
	}
}

// 处理函数
function handle() {
    console.log('节流：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', throttle(handle,500));

2、定时器
当触发事件时，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func,wait){
	var timeout;
	var pervious = 0;
	return function(){
		context = this;
		args = arguments;
		if(!timeout) {
			timeout = setTimeout(function(){
				timeout = null;
				func.apply(context,args)
			},wait)
		}
	}
}

1、第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行
2、第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件