防抖和节流

简单聊聊防抖和节流的理解

1.防抖 （多次触发 只执行最后一次）

作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，重新计算时间防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒

场景：

 (1) resize事件, 屏幕修改宽度高度, 会非常频繁的触发
      一般需求是, 等用户修改完屏幕大小后, 做适配 => 延迟执行
 (2) 输入框搜索提示, 实时每个字母都立刻做提示, 频繁触发了
      一般需求是, 等用户一段时间没有输入新的内容, 做搜索提示 => 延迟执行

原理：使用定时器 setTimeout ，再执行 setTimeout之前，先使用 clearTimeout() 把上一次定时器给清除掉，这样就达到了只会执行最后一次触发的setTimeout

2.节流 （规定时间内 只触发一次）

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次节流类似于英雄联盟里的英雄平A 一定时间内点击多次只进行攻击一次

场景：

  (1) 点按钮loading请求, 发请求立刻发, 发的过程中, 不会发第二次
  (2) 轮播图, 点击箭头, 开始滑动, 滑动的过程中, 关闭节流阀, 等动画结束, 才能执行第二次
  (3) 下拉刷新, 上拉加载更多, 一旦请求了, loading状态, 关闭节流阀
  (4) h5小游戏, 跑酷, 跳的时候, 关闭节流阀, 落地之后, 才能跳第二次

原理：在第一次触发了setTimeout后，先把阀门关闭（使用一个Boolean变量），等执行完后再把阀门打开，这样后面的setTimeou在触发前会先判断阀门是否关闭，如果关闭了则不会继续触发，要等之前的setTimout执行完后，才允许触发后面的setTimeout简单地理解就是：一群人排队体检，第一个人进去一个房间体检，要把门关上，要等这个人体检完，再把门打开，下一个才可以进去

防抖 和 节流存在的意义都是为了性能优化, 可以阻止事件的频繁触发

（ 拓展：防抖 和 截流都使用到了闭包，闭包的好处是里面的变量只会在闭包中使用，也就是外部的函数是不能使用这个变量的，也就不会修改这个变量，就不会受到外部的污染 ）