JS 的防抖和节流

从实用角度来讲,JS的防抖和节流,属于前端技术的“性能优化”。前端

 

防抖:性能优化

假设有一个事件函数,在第一次触发该事件时,先不执行函数,而是等待1秒后再执行,那么:闭包

  1. 若是在1秒内再次触发该事件,则该事件函数不执行,1秒时间从新计算dom

  2. 若是在1秒内没有再次触发该事件,则执行该事件函数函数

达到的效果就是,在1秒内屡次触发事件,只会执行一次函数。性能

既然涉及到了计时,那么就须要 setTimeOut 这个函数,还须要一个变量来存储这个计时,考虑保护全局变量纯净,咱们能够使用闭包处理。优化

 

节流:spa

 假设有一个事件函数,在第一次触发该事件后,设定一个阈值1秒,在这1秒内不论触发多少次事件,都不执行函数。等1秒时间到了,不论有没有触发事件,都执行一次函数。事件

 

使用场景:input

  1. 搜索框input事件,例如要支持输入实时搜索能够使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当作用户输入完成,而后开始搜索,具体使用哪一种方案要看业务需求。
  2. 页面resize事件,常见于须要作页面适配的时候。须要根据最终呈现的页面状况进行dom渲染(这种情形通常是使用防抖,由于只须要判断最后一次的变化状况)
相关文章
相关标签/搜索