手写代码——节流和防抖

·  阅读 917

防抖 debounce

限制事件的回调函数在短时间内多次执行,其效果就是将多个事件「合并」为一次作出响应。

  • 场景:监听输入框 change 事件,给出输入建议
  • 防抖:用户输入结束或暂停达到一定时间,change 事件才会触发回调函数的执行
/**
 * 
 * @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

在事件的回调函数执行一次后,该函数在指定时间期限内不再工作,直到过了这段时间才可以重新被调用。针对短时间内会被大量触发的事件,限制在一定频率下(间隔指定的时间)才会响应。

  • 场景:拖拽元素需要不断获取元素的定位,监听 drag 事件
  • 节流:无论拖拽事件触发得多么快,都依据限制的时间,按一定的频率执行回调函数
/**
 * 
 * @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));
复制代码
分类:
前端
标签: