JAVASCRIPT 防抖与节流

概念

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

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

优缺点

优点

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象

缺点

防抖：如果事件在规定的时间间隔内被不断的触发，则调用方法一直不会执行，会被不断的延迟

节流：HAVE NO IDEA ......

防抖 debounce

触发高频事件后n秒内函数只会执行一次（最后一次被执行），如果n秒内高频事件再次被触发，则重新计算时间;

/**
 * 防抖函数 可以放入项目中的公共方法中进行调用
 * @param func
 * @param delay
 * @returns {function(*=): void}
 */
function debounce(func, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.call(this, arguments)
    }, delay)
  }
}

方法调用

    /**
     * 防抖调用
     */
    handleDebounce: debounce(function () {
      console.log('debounce')
    }, 2000),

节流 throttle

在单位时间内, 只会触发一次事件，如果事件触发后，又重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束

/**
 * 节流函数 可以放入项目中的公共方法中进行调用
 * @param func
 * @param delay
 * @returns {function(): undefined}
 */
function throttle(func, delay) {
  // 通过闭包保存一个标记
  let canRun = true;
  return function () {
    // 在函数开头判断标记是否为true，不为true则return
    if (!canRun) return;
    // 立即设置为false
    canRun = false;
    // 将外部传入的函数的执行放在setTimeout中
    setTimeout(() => {
      // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次了
      // 当定时器没有执行的时候标记永远是false，在开头被return掉
      func.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

方法调用

    /**
     * 节流调用
     */
    handleThrottle: throttle(function () {
      console.log('throttle')
    },2000)