JS resize with debounce

resize-with-debounce.js

// adding a debounce function in order to prevent the resize
// code from being called too often.
// @see http://stackoverflow.com/a/9828919
// @see https://davidwalsh.name/javascript-debounce-function
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
var debounce = function (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

var determineDevice = debounce(function() {
  // determine which breakpoint we're at
  if ($searchBox) {
    console.log($searchBox.css('height'));
    if ($searchBox.width() == 55) {
      $searchBox.addClass('tablet');
    }
    else if ($searchBox.width() == 370) {
      $searchBox.removeClass('tablet');
      $searchBox.removeClass('input-expanded');
      $searchBox.removeClass('mobile');
    }
  }
}, 100);

// Determine device on first load
determineDevice();

// Re-determine device on resize
$(window).resize(function() {
  determineDevice();
});