防抖和节流

防抖(debounce)

含义：事件被触发后延迟n秒再执行回调，如果在这n秒内又被触发，则重新计时。

/**
 * 
 * @param fn 事件触发的回调函数
 * @param delay 延迟时间
 */
function debounce(fn, delay = 500) {
  let timer = null;
  
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      // 执行事件的回调函数
      fn.apply(this, arguments);
      // 执行后清空定时器
      timer = null
    }, delay)
  }
}

// 调用
let elem = document.getElementById('input');
elem.addEventListener('change', debounce(function () {
  console.log('change');
}, 1000))

节流(throttle)

顾名思义就是每过n秒仅执行一次回调函数。如单位时间内多次触发函数，也只有一次生效。

/**
 * 
 * @param fn 事件触发的回调函数
 * @param delay 延迟时间
 */
function throttle(fn, delay = 100) {
  let timer = null;

  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      // 执行事件的回调函数
      fn.apply(this, arguments);
      // 执行后清空定时器
      timer = null
    }, delay)
  }
}

// 调用
let dom = document.getElementById('div');
dom.addEventListener('drag', throttle(function () {
  console.log('drag');
}, 300));

总结

防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象，作为大前端开发人员是应该熟练掌握的技能。