js防抖和节流代码实现

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

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

// 防抖函数
function debounceFn(fn, delay){
  let timer = null;

  return function(){
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay)
  }
}

function handleScroll(){
  console.log('scroll is doing')
}

window.addEventListener('scroll', debounceFn(handleScroll, 300))

// 节流函数
function throttle(fn delay){
  let cando = true;

  return function(){
    if(!cando){
      return;
    }
    cando = false;
    setTimeout(() => {
      cando = true;
      fn.apply(this, arguments);  
    })
  }
}

function sayHello(e) {
    console.log('节流：hello', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHello,500));