JS节流和防抖的区分和实现详解

本文主要介绍的是关于JS中比较经常使用的函数：节流函数和防抖函数，从概念、使用场景到代码简单实现作了一个详细的区分。但愿对你有所帮助。·

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

节流概念(Throttle)

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

主要应用场景有：scroll、touchmove

防抖概念(Debounce)

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

主要应用场景有：input验证、搜索联想、resize

节流实现

思路： 第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase，函数会依次运行