JS中节流与去抖的简单对比

上一篇博客里我简单讲了去抖的概念，提到去抖就很容易联想到节流，两者经常放在一起比较，万一下次面试我好不容易讲清楚了去抖，面试官又让我讲节流呢？之前工作中用到了去抖，还比较熟，节流只是看过理论，以防万一，这里还是总结一下二者的区别。

应用场景

• 去抖：对于resize和mouseenter等可能会连续触发的事件，用户只想执行一次事件操作，此时就用去抖保证短期内的多次触发只执行最后触发的那一次
• 节流：用在一些可能会频繁触发的事件操作，用来降低操作执行的频率，比如要实现一个原生的拖拽功能，需要监听mousemove事件，在回调函数中对拖拽的DOM元素改变样式，进而引发浏览器的重排重绘，如果不节流，事件触发的频率非常高，浏览器可能假死，而使用节流可以把回调函数的执行频率控制在一定范围内，既不会太高导致浏览器假死，也不会太低导致拖拽的视觉效果失真。因此节流所做的就是控制可能高频率连续触发的事件操作在一定时间内执行一次

小结：二者在应用场景上的主要区别是去抖针对只执行一次的操作，节流针对需要连续执行多次的操作

实现方法

从应用场景来看可能还有点不够清晰，下面上代码，看看代码实现，区别就很明显了

• 去抖：

window.onresize = function (){
	if (timer) {
		clearTimeout(timer)
	}
	timer = setTimeout(function(){
		// 触发事件时要执行的操作
		…………
		timer = null
	}, 200)
}

上面的代码里用了一个定时器，延迟200ms将事件操作加入事件队列，关键代码是timer = null，如果一次触发事件后200ms内再次触发事件，就不会执行setTimeout中的函数，也就不会执行timer = null，就会清除定时器，然后新建一个定时器重新计时200ms，保证在200ms内频繁触发resize事件时只在最后一次触发才执行操作。

• 节流：

xxx.onmousemove = function (){
	if (!timer) {
		timer = setTimeout(function(){
			// 触发事件时要执行的操作
			…………
			timer = null
		}, 200)
	}
}

上述代码在事件触发时先判断是否存在定时器，如果不存在，就新建一个定时器，200ms后执行操作，如果在200ms内再次触发了事件，因为定时器已经存在了，就会等待200ms时间到执行一次操作，如果在一段大于200ms的时间内频繁触发事件，就会每200ms执行一次操作。

小结：上面是用定时器实现的去抖和节流，可以看到，二者的主要区别在于去抖是如果存在定时器就清除定时器并新建定时器，节流是如果存在定时器就等待定时器内操作执行完才新建定时器。

---

参考资料

1. JS中的节流和去抖动
2. JavaScript 函数节流和函数去抖应用场景辨析