Throttle vs. Debounce

What is Throttle?

Throttling enforces the maximum number of time a function can be called over time. Let’s look at how to use throttle function in underscore.js library. This is a simple implementation of throttle function.

var throttle = (func, waitTime) => {
  var wait = false;
  return function() {
    if (!wait) {
      func.call();
      setInterval(() => {
        wait = true;
      }, waitTime);
    }
  };
}

What is Debounce?

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called.

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}