手写JS(四)--实现防抖和节流

1,886 阅读1分钟

使用前请先消化闭包知识点,毕竟这两个都是闭包

// 防抖 至少间隔多久执行
// 执行一次后在单位时间内不能再次执行,如果在单位时间内再调用,则推迟该函数的执行。
function debounce(fn, time) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, time);
  }
}

// 节流 单位时间内最多执行一次
function throttle(fn, time) {
  let startTime = new Date();
  let timer = null;
  return function () {
    clearTimeout(timer);
    // 注意else里面没有给startTime赋值,因此总会走到if里面去,达到我们单位时间内最多执行一次的目的
    const currentTime = new Date();
    if(currentTime - startTime > time) {
      startTime = currentTime;
      fn();
    } else {
      timer = setTimeout(fn, time);
    }
  }
}