如何区分并实现JavaScript中的节流和防抖技术？

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

在编写JS时，这两个函数比较常见，有时分不清用哪个。或者知道代码要怎么写，但不知道它究竟是什么函数：是节流函数还是防抖函数。今天有个同学分享了这两个函数的区别，我来分享一下。

在写JS时，这两个函数比较常见，有时候傻傻分不清用哪个，或者说知道代码要怎么写，但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分，我也来回顾一下，加深一下印象，以便日后用到时心里有底。PS：百度和谷歌搜索前几个介绍都是相反介绍，本文为原创，如有雷同纯属抄袭我的。

节流概念(Throttle)

按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。

主要应用场景有：scroll、touchmove

防抖概念(Debounce)

抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。