<div class="left-panel">Raw resize events<br></div>
<div class="right-panel">Debounced events<br></div>
body {
  background: #444444;
  color: white;
  font: 15px/1.51 Helvetica, sans-serif;
  margin:0 auto;
}
.left-panel,
.right-panel {  
  padding:2%;
  margin:0;
  width:46%;
  float:left;
  min-height:100vh;
  text-align:center;
}

.left-panel {
  background: #ccc;
  color:black;
}
// Based on http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
$(document).ready(function(){
  
  var $win = $(window);
  var $left_panel = $('.left-panel');
  var $right_panel = $('.right-panel');
  
  function display_info($div) {
    $div.append($win.width() + ' x ' + $win.height() +  '<br>');
  }
                
  $(window).on('resize', function(){
    display_info($left_panel);
  });
  
  $(window).on('resize', _.debounce(function() {
    display_info($right_panel);
  }, 400));
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js