持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

引言

防抖节流我相信大家都不陌生，防抖和节流往往是八股文中无法绕开的知识，而实际开发中，防抖和节流到底怎么用，这你了解么？

防抖 Debounce

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

防抖又适用于什么场景呢？

试想一下，你有若干个路径节点，你需要在用户选择后在地图上绘制，你会如何做？

每一个选择的路径分段都会向服务器进行请求，如果放任用户点击选择，那么如果用户后悔又是什么样的场景？

这是我在项目中遇到的需求

根据设备的状态去划分时间段，用户选择时间段后绘制轨迹，轨迹是这个时间段的所有gps数据。

如果让用户选择后立刻显示，那么页面阻塞是非常严重的，因为gps数据需要从其他数据库寻求，访问速度非常令人头大。

防抖在这里非常好的解决该问题，防抖也意味着，我不需要在选中后立刻向服务器查询，我在用户选择后一定时间后再进行选择，这样就可以提高整体的性能。

防抖实际就是用于用户自己都不确定的事，或者在接口可能会重复而又不可避免的情况下使用。

一个更简单的说法是，防抖好比拧水龙头，我不知道你是拧着玩还是认真的，那我就不急着出水，我等你不动了再出水。

防抖函数的表现上是会多次触发事件，但是在最后一次才会执行，它是事件覆盖的过程。

相当于 while do

那么节流又是什么呢？

节流 throttle

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

节流呢实际上跟像do while的结构，它和防抖不同，防抖是最后执行，而节流是一开始执行。

节流在一定时间内是不会进行再一次执行，不同于防抖的重复覆盖，它跟像拧水龙头一次后就出水，而之后再也不出水，直到时间过了。

在项目中，节流往往是应用于一些重复执行的功能，例如一些很容易重复执行的函数，例如监听用户的点击操作。如果它点击n次提交，实际我只提交一次。

vue中的使用

其实防抖和节流都是最常用的两块内容，我相信大家都会用，但是对于部分新手可能想到了用，但是发现vue中怎么写都做不到防抖，我就是这样，那么如何解决呢？

实际在vue的官方文档给出了解决方案。

则是调用lodash库,lodash是一个非常牛的库，请务必学习。

主要则是不以常规方法中定义而是用类似属性指明的方法

例如： click:_.debounce(()=>{ this.submit() },1000)

调用时则： click()或this.click()

总结

防抖和节流其实不止只是八股文，它们其实非常有用，但是根据不同框架的限制它的体现也就有所差异，所以希望大家在用到时多多结合场景进行选择和使用。