如何将节流函数throttle和防抖函数debounce合成为长尾？

本文共计1513个文字，预计阅读时间需要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，然后执行事件处理函数。

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

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

区别：

　　1. throttle

　　　　如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。