[Debounce window resize event] Debounce window resize event #javascript #frontend #perfermance

javascript-resize-debounce.js

/* --------------------------------------------
 *      Detect device orientation
 *      and trigger changes based on it
   --------------------------------------------*/
function updateOrientation() {
  // Detect whether device supports orientationchange event, otherwise fall back to the resize event
  // Genius solution from http://stackoverflow.com/a/2307936
  let supportsOrientationChange = "onorientationchange";
  let orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  let newAngle = null;
  let newOrientation = null;
  if(supportsOrientationChange){
    newAngle = window.orientation;
      switch(newAngle){
        case 0:
        case 180: 
          newOrientation = 'portrait'; 
          break;
        case 90:
        case -90: 
          newOrientation = 'landscape'; 
          break;
      }
  } else {
     if(document.width < document.height){
       newOrientation = 'portrait'
     } else {
       newOrientation = 'landscape'
     }
  }

  // Do the processing here

  /*
   * Beautiful debouncing for resize event firing too much on the PC
   * by Pim Jager http://stackoverflow.com/a/668185/930987
   */
  resizeEvent = false;

  window.addEventListener(orientationEvent, function() {
    if(!resizeEvent) {
      clearTimeout(resizeEvent);
      resizeEvent = setTimeout(updateOrientation, 500) // half a second should be enough for a modern PC
    }
  })
}