防抖和节流的应用场景之乱七八糟的汇总

　　在前端开发中一部分的用户行为会频繁的触发事件执行,对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搜索联想，用户在不断输入值时…

　　节流：可以将一些事件降低触发频率。比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；另外还有做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

　　防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。

标签：触发,防抖,节流,乱七八糟,timer,事件,计算
来源： https://www.cnblogs.com/mandymm/p/13984918.html