节流和防抖

节流

某个时间段内,只执行一次
可通过时间戳和定时器实现。

时间戳方式：

let throttle = function(func, delay){
    let prev = Date.now();
    return function(){
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(this, arguments);
            prev = Date.now();
        }
    }
}

定时器方式：

let throttle = function(func, delay) {
    let timer = null;
    return function() {
      if (!timer) {
        timer = setTimeout(() => {
          func.apply(this, arguments);
          timer = null;
        }, delay);
      }
    };
  };

防抖

处理函数截止后一段时间依次执行

function debounce(fn, wait) {
    let timeout = null;
    return function() {
      if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
      timeout = setTimeout(() => {
          fn.apply(this, arguments);
          timeout = null;
        }, wait);
    };
  }
  // 处理函数
  function handle() {
    console.log(Math.random());
  }
  // 滚动事件
  window.addEventListener("onscroll", debounce(handle, 1000));