码字仓颉

节流与防抖

2018-04-16

节流与防抖

防抖与节流函数是一种最常用的高频触发优化方式，能对性能有较大的帮助。

节流函数

  • 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: scrooll 事件或者 resize 事件，通常每隔 100~500ms 执行一次即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
function throttle(fn, wait) {
  let timer = null
  return function() {
    let context = this
    let args = arguments
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args)
        timer = null
      }, wait)
    }
  }
}

防抖函数

  • 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。
1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, wait) {
  let timer = null
  return function() {
    let context = this
    let args = arguments
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, wait)
  }
}
Tags: Javascript
← 寻找最长回文字符串 Centering in CSS →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章