JS优化: 谈谈节流(throttle)和防抖(debounce)

节流和防抖可能很多人都听说过，或者使用过，我认为它主要是对我们的一些js操作起到一些优化性的作用的，我们先看看官方对于这两个东西的概念吧:

• 防抖: 是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，防抖注重结果
• 节流: 让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用，节流注重过程

---

可能大家会有点蒙，这两个玩意我们有什么用，如何能够实现性能优化呢？我通俗说下我的看法:
对于防抖: 当我们执行的一些频繁的操作，如js文本框输入内容，需要实时的根据输入的内容去发送ajax请求或者做输入内容的校验时，我们常监测输入框的Change事件去实时获取输入框中的内容，但是当用户频繁的输入和修改内容时，我们就需要不断的去做校验或者去发送ajax，这对于性能的开销是很大的，这时如果我们能在很短的时间内忽略内容的改变，减少任务的处理是否会减少性能的开效呢？
对于节流: 当我们快速的改变浏览器的窗口的大小时，在改变的这个过程中，我们并不希望监听的resize事件不断的被触发，而是在一定的时间间隔后，在前一次的操作结束时，我们才继续做下次的响应，这时我们就可以使用节流进行处理了

---

那现在我们就来自己手写一个就简单的节流和防抖函数：
防抖实现思路: 当我们去触发函数时，先将之前还在执行的操作给删除调，重现执行现在的操作

/**
* 这里我们封装一个防抖函数
* fn: 我们需要使用防抖执行的函数
* delay: 指定函数在多长的时间后调用，默认500ms
*/
function debounce(fn, delay=500){
	let timer = null;
	return function(){
		if(timer){
			clearTimer(timer)
		}
		timer = setTimeout(() => {
			fn.apply(this, arguments);
			timer = null;
		}, delay)
	}
}

节流的实现思路: 在执行函数时先判断是否函数还在执行，有则直接return， 没有才执行相应的函数

/**
* 封装一个节流函数
* fn: 需要进行节流的执行函数
* delay: 指定节流的时间，默认为100ms
*/
function throttle(fn, delay=100){
	let timer = null;
	return function(){
		if(timer){
			return;
		}
		timer = setTimeout(() => {
			fn.apply(this, arguments);
			timer = null;
		}, delay)
	}
}

在节流和防抖中我们使用到了setTimeout()这个定时器，同时还运用到了js中闭包的理念，希望这篇文章对大家有所帮助吧！！大家 加油！！