js防抖节流

1、防抖，触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次出发，则重新计算时间。

const debounce = (fn, time) => {
  let timeout = null;
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, time);
  }
};

防抖常用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次

 

2、节流，高频事件触发，但n秒内只会执行一次，所以节流会稀释函数的执行频率

const throttle = (fn, time) => {
  let flag = true;
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, time);
  }
}

节流常应用于鼠标不断点击触发、监听滚动事件。