在前端开发中一部分的用户行为会频繁的触发事件执行,对DOM的操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器崩溃。函数（防抖和节流）就是为了解决类似的需要应运而生的。
防抖:实时搜索(keyup) 、 拖拽(mousemove)、
节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、
--------------------------------------------------------------------------------------------------------------------------------------分割线--------------------------------------------------------------------------------------------------------------
- 防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。
-
- 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
- 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
- 文本编辑器实时保存，当无任何更改操作一秒后进行保存
防抖重在清零 clearTimeout(timer)
-
节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
- scroll 事件，每隔一秒计算一次位置信息等
- 浏览器播放事件，每个一秒计算一次进度信息等
- input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)
代码如下，可以看出来「节流重在开关锁 timer=null」
总结 (简要答案)
防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null
--------------------------------------------------------------------------------------------------------------------------------------分割线--------------------------------------------------------------------------------------------------------------
防抖：一般可以使用在用户输入停止一段时间过后再去获取数据，而不是每次输入都去获取，如：频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器；search搜索联想，用户在不断输入值时…
节流：可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。
防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。