手写节流和防抖

1、 节流和防抖分别是什么？

1. 函数节流：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效
2. 函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

2、手写节流

function throttle(fn, delay) {
  // 记录上一次函数触发的时间
  let lastTime = Date.now();
  return function() {
    let context = this;
    // 记录当前函数触发的时间
    var nowTime = Date.now()
    // 当前时间减去上一次执行时间大于这个时间间隔才让他触发这个函数
    if (nowTime - lastTime >= delay) {
      // 绑定this 指向
      fn.apply(context, arg);
      // 同步时间
      lastTime = Date.now();
    }
  }
}

function fn() {
  console.log('节流');
}
addEventListener('scroll',throttle(fn, 1000))

3、 手写防抖

function debounce(fn, delay) {
  // 利用闭包保存定时器
  let timer = null;
  return function() {
    let context = this;
    let arg = arguments;
    // 在规定时间内再次触发会先清除定时器后再重设定时器
    clearTimeout(timer)
    // 重新设置一个新的延时器
    timer = setTimeout(() => {
      fn.apply(context, arg)
    }, delay);
  }
}
function fn() {
  console.log('防抖');
}
addEventListener('scroll',debounce(fn, 1000))