如何区分和实现JavaScript中的节流函数throttle与防抖函数debounce？

本文共计1515个文字，预计阅读时间需要7分钟。

问题引出：在一些场景下，由于事件频繁触发，导致频繁进行DOM操作、资源加载，进而导致UI卡顿，甚至浏览器崩溃。

在这种情况下，我们实际上的需求大多为停止频繁的修改，以避免在n秒后执行。

问题的引出

　　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器崩溃。

在这样的情况下，我们实际上的需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。

1. resize事件

2. mousemove事件

3. touchmove事件

4.scroll事件

throttle 与 debounce

在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.js ，Lodash.js 等都提供了这两个函数。

原理：

首先我们会想到设置一定的时间范围delay，每隔delayms 执行不超过一次。

事件处理函数什么时候执行能？ 这里有两个选择，一是先执行，再间隔delayms来等待；或者是先等待delayms，然后执行事件处理函数。

操作过程中的事件全不管，反正只执行一次事件处理。

相同低，这一次的事件处理可以是先执行一次，然后后面的事件都不管; 或者前面的都不管，最后操作完了再执行一次事件处理。