Skip to content

Debounce & Throttle

防抖 debounce¶

场景：频繁触发的keyup事件，当用户输入暂停或结束后，才执行操作。

实现逻辑¶

var $input = document.getElementById('kw');

var timer = null;
$input.addEventListener('keyup', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    // TO DO
    console.log(e.target.value);
    timer = null;
  }, 1000);
});

封装成函数¶

function debounce(fn, delay = 500) {
  var timer = null;

  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    var args = Array.prototype.slice.call(arguments);
    timer = setTimeout(function() {
      fn.apply(this, args);
      timer = null;
    }, delay);
  }
}

// 测试
var $input = document.getElementById('kw');

$input.addEventListener('keyup', debounce(function(e) {
  console.log(e.target.value);
}));

高级版本¶

function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) {
          context = args = null;
        }
      }
    }
  };

  return function(...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

节流 throttle¶

场景：频繁触发的drag事件，每隔一段固定时间，才真正执行一次操作。

实现逻辑¶

var $div = document.getElementById('result_logo');
$div.setAttribute('draggable', true)

var timer = null;
$div.addEventListener('drag', function(e) {
  if (timer) {
    return;
  }
  timer = setTimeout(function() {
    console.log(e.pageX, e.pageY);
    clearTimeout(timer);
    timer = null;
  }, 400);
});

封装成函数¶

function throttle(fn, delay = 400) {
  var timer = null;

  return function() {
    if (timer) {
      return;
    }
    var args = Array.prototype.slice.call(arguments);
    timer = setTimeout(function() {
      fn.apply(this, args);
      clearTimeout(timer);
      timer = null;
    }, delay);
  }
}

// 测试
var $div = document.getElementById('result_logo');
$div.setAttribute('draggable', true);

$div.addEventListener('drag', throttle(function(e) {
  console.log(e.pageX, e.pageY);
}));