JavaScript 中, 某些事件, 如 ‘input’, ‘resize’, ‘scroll’, 可以在很短时间内频繁触发, 如果把逻辑函数直接绑定到这些事件上, 会严重影响运行性能, 甚至造成更大的麻烦, 比如把 ajax 请求直接绑定到 ‘input’ 事件上, 将在用户输入时产生频率很高的 ajax 请求, 给服务器造成不必要的响应压力.

解决方案:

函数防抖动 (Debouncing)

函数防抖动的思想是: 规定事件发生到响应的时间, 在此时间内再次触发的相同事件将重置倒计时, 实现防抖动.

防抖动有两种形式: 前缘响应和后缘响应.

  • 前缘响应是: 在事件第一次触发时马上响应, 然后倒计时一段时间, 在此时间内发生的事件不会响应, 而且会重置倒计时. 前缘响应典型场景如滚动时隐藏的导航栏 (绑定滚动事件), 需要在滚动开始时立即响应, 同时避免后续频繁触发.
  • 后缘响应是: 在事件第一次触发后开始计时, 在事件最近一次发生, 且间隔一段时间没有新事件被触发时响应. 典型场景如搜索提示 (绑定输入事件), 仅在输入停止一段时间后触发 ajax, 以节省网络开销.

以下是 underscore.js 提供的防抖动函数, 同时提供的第 3 个参数immediate, 决定是否前缘触发:

函数节流 (Throttling)

通过限制一定时间内事件触发的次数, 达到函数节流的目的.

underscore.js 提供的节流函数:


REFERENCE

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注