js中的节流和防抖的区别及应用场景

函数节流(throttle)和防抖(debounce):是一种性能优化手段 一、函数节流 类比生活中的例子。高频率触发某个事件就像一个大开的水龙头,水流源源不断大量流出,就像代码在不断执行。这是对资源的一种浪费。我们要通过节流,把水龙头拧紧一点,让它流水的频率降低,但是每一段时间都能滴下一滴水,从而节省资源。 节流应用场景: 用户滚动浏览器滚动条的时候,就会调用后台的接口来更新页面上的某些内容。如果不对函数调用的频率加以限制的话,那么可能我们滚动一次滚动条就会产生N次的调用,损耗浏览器引擎。使用节流函数限制接口调用频率,优化性能。 节流函数 //节流函数,只有大于设定的周期才会执行第二次 fu