JS 什么是函数节流、函数防抖、有什么区别、作用是什么？

1、前文

函数节流 和 函数防抖 虽然这俩名词听起来很抽象，但理解起来却跟纸老虎似的，不过它们在实际工作中用的频率确实非常高，因此这两个名词概念是必须要掌握的，下面我们开始进入正文。

2、什么是函数节流

假设我们有个搜索输入框，正常情况下用户每输入一次我们就会拿它的值去请求相应数据，如图：

我们可以看到每按一次 m 就会请求一次，图中按了 9 次 就会请求 9次，假设有 10w 个人按照这种频率同时输入，对于小企业来说服务器应该是扛不住的，解决这个问题也很简单，既然频率那么快，那我们就把频率降低设置每隔 500 毫秒请求一次，而这 500 毫秒期间输入的都将被忽略，如图：

我们可以看到，这次输入 9个 m ，实际请求的只有4次，是的，这就是函数节流，如果你仍然觉得节流这词很抽象，不妨把它当做是节约会好理解些。

3、什么是函数防抖

假设我们有个提交订单页面，正常情况下点击[提交订单]会走接口并等待响应，然后根据响应们进行跳转页面或其它操作，如图：

问题来了，如果用户网络很差，他点了[提交订单] 后服务器并没有迅速响应，因此用户可能误以没点就会再点一次[提交订单]导致产生了两次提交，再比如用户点击[提交订单]时一不小心多点了几次，如图：

图中可以看到迅速点击提交时，出现两次 submit 请求，解决上面问题也很简单，我们将[提交订单]设置为只能点击1次，后续无论怎么点击都被忽略掉，如图：

可以看到这次一共点击了 3 次 [提交订单]，但只有一次请求，就算你连续点 10W 次，它也只有一次请求，是的，这就是函数防抖

4、函数节流和防抖的应用场景

节流和防抖这概念不止应用于JavaScript 这门语言中，任何语言都会有这两个概念，这是对性能优化的一种手段所称呼的名词，应用十分广泛，比如提交表单、发送验证码等都跟这俩概念息息相关，关于节流或防抖如何选择得根据需求而定，本质上都是为了优化。

Tip: 函数节流和函数防抖的代码有很多版本，网上自行搜索即可，这里不再讲述，相信你理解这两个概念之后自己也可以动手实现的。

好了，内容就到这里。

5、总结

节流：降低频率
防抖：限制次数