此页内容

约 199 字小于 1 分钟

2022-04-16

提问

  1. 什么是 节流与防抖?
  2. 如何实现 节流与防抖?

节流与防抖

  • 函数防抖: 在事件被触发的 N秒后再执行回调,如果在这N秒内事件又被触发,则重新计时。

  • 函数节流:在一个规定的单位时间内,只能有一次触发事件的回调函数执行,如果在单位时间内事件被触发多次,只有一次生效。

实现

函数防抖

function debounce(fn, wait) {
  var timer = null;
  return function () {
    var ctx = this;
    var args = arguments;

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      fn.apply(ctx, args);
    }, wait);
  }
}

函数节流

function throttle(fn, delay) {
  var preTime = Date.now();
  return function () {
    var ctx = this;
    var args = arguments;
    var nowTime = Date.now();
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(ctx, args);
    }
  }
}