函数节流与函数防抖

函数节流

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。 简单的说，有个需要频繁出发函数，出于优化性能角度，在规定时间内，只让函数出发的第一次生效，后面不生效。使用场景：如鼠标滚动scroll

节流函数

function throttle(fn, delay) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= delay) {
      fn.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    }
  }
}

上面的节流函数是借用setTimeout函数来实现的，我们都知道setTimeout是宏任务。我们完全可以借用一个状态量disable来控制fn的调用。代码如下：

function throttle2(fn, delay) {
  let start = Date.now();
  let now;
  let disable = true;
  return function () {
    now = Date.now();
    disable = disable && now - start < delay
    if (!disable) {
      disable = true
      start = now;
      fn.apply(this, arguments);
    } 
  }
}

用例

document.onscroll = throttle(function () {
    console.log('scroll被出发了' + Date.now());
}, 200);

结果示图

防抖函数

防抖函数：一个需要频繁出发的函数，在规定时间内，只让最后一次生效，前面的不生效。使用场景：如 点击提交按钮（防止多次提交）

防抖函数

function debounce(fn, delay) {
    var timer = null;
    return function () {
        // 清除上一次的延时器
        clearTimeout(timer);
        //重新设置新的延时器
        timer = setTimeout(() => {
            fn.apply(this);
        }, delay);
    }
}

用例

document.getElementById('btn').onclick = debounce(function () {
    console.log('点击事件被触发了' + Date.now());
}, 1000)

结果示图