javascript 节流/防抖 (网络请求性能优化)

在网页实际运行的某些场景下,有些事件时会被不间断的被触发的,如resize事件,而不像是我们想象中的,滚动一次触发一次。这种情况下,由于过于频繁地DOM操作和资源加载,严重影响了网页性能,甚至会造成浏览器崩溃,合理的使用节流 可以防止以上情况发生

节流/防抖 就是规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。就好比如水滴攒到一定的重量才会落下一样,

常见应用场景:

  • 窗口调整(resize)
  • 窗口滚动(scroll)
  • 元素位移(mousemove)
  • 抢购疯狂点击(click)
  • input输入框(keyup)

节流

 
0

上面代码中我使用的方式是 通过Date()获取当前时间的方式 还可以用 定时器setTimeout去实现。

防抖

 
    

 

你可能感兴趣的:(javascript)