节流、防抖函数

发表于 更新于

节流和防抖函数是开发中常用到的两个工具类型的函数，因此要求能够手写这两个函数加深理解

防抖函数

停止触发事件后，经过规定的延时再执行处理函数，如果在延时的时候又触发了事件，计数器重新倒计时

1
2
3
4
5
6
7
8
function debounce(fn, wait) {
  let timeout = null;
  return function () {
    if (timeout !== null)
      clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  }
}

节流函数

频繁触发事件的时候，每隔一定延时处理事件

1
2
3
4
5
6
7
8
9
10
11
12
13
//时间戳实现
function throttle(func, delay) {
  var prev = Date.now();
  return function () {
    var context = this;
    var args = arguments;
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//定时器
function throttle(func, delay) {
  var timer = null;
  return function () {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

节流和防抖的区别和适用场景

区别：如果时延均为200ms，连续触发一个事件1001ms后停止，那么节流会执行6次执行函数（第一次会立刻执行），而防抖只会在停止事件后200ms触发执行1次
防抖适用场景：用户输入表单验证或者是搜索联想
节流适用场景：用户向下滚动无限加载（不能像防抖那样用户滚动完了才开始加载）