Throttle 和 debounce

[hifizz]

Throttle 是节流，比如window的resize事件 Debounce 是防抖，进度条调整，hover住，鼠标停下的时候

[hifizz]

/**
 * 节流函数，n 秒内最多执行一次函数
 * @param {Function} func 需要节流的函数
 * @param {number} wait 需要等待的时间
 * @returns Throttled<func> 包装过后的func
 */
function throttle(func, wait) {
  let wait = wait || 0;
  let lastTime = 0; // 最后一次执行的时间
  let timer = null;

  return function throttled(...rest) {
    const currentTime = new Date().getTime();
    if(currentTime - lastTime > wait) {
      func(...rest);
      lastTime = currentTime;
    } else {

      // 如果有定时器存在，则先清空定时器
      if(timer) {
        clearTimeout(timer)
        timer = null;
      }
      timer = setTimeout(function() {
        func(...rest)
      }, wait)
    }
  }
}

[hifizz]

/**
 * 防抖动函数。最后一次调用之后，都会等待wait秒的时间才会执行。在wait期间，调用该函数，则会充值触发时间。
 * @param {Function} func 需要防抖的函数
 * @param {Number} wait 需要等待的时间
 * @returns debounced<func>
 */
function debounce(func, wait) {
  wait = wait || 0;
  let timer = null;

  return function debounced(...rest) {

    // 清空之前的定时器，该定时器任务可能是执行完毕，也可能是还没有执行
    if(timer) {
      clearTimeout(timer)
      timer = null
    }

    // 重新设置定时器
    timer = setTimeout(function() {
      func(...rest)
    }, wait)
  }
}