JSFiddle - React, Tailwind, and code Playground

by serg_x

HTML

<div class="action">Change window size to see action</div>

JavaScript

var sidebarInit = function() {
  $(".action").html("Width: " + window.innerWidth + "<br>Height: " + window.innerHeight);
}

/*
var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
  rtime = new Date();
  if (timeout === false) {
    timeout = true;
    setTimeout(resizeend, delta);
  }
});
function resizeend() {
  if (new Date() - rtime < delta) {
    setTimeout(resizeend, delta);
  } else {
    timeout = false;
    sidebarInit();
  }
}
*/

var gentleResize = {
rtime: 0,
timeout: false,
delay: 200
};
//console.log(gentleResize);
$(window).resize(function() {
  gentleResize.rtime = new Date();
  if (gentleResize.timeout === false) {
    gentleResize.timeout = true;
    setTimeout(resizeend(), gentleResize.delay);
  }
});
var resizeend = function() {
  if (new Date() - gentleResize.rtime < gentleResize.delay) {
    setTimeout(resizeend(), gentleResize.delay);
  } else {
    timeout = false;
    sidebarInit();
  }
}


/*
var gentleResize = {};
gentleResize.rtime = 0;
gentleResize.timeout = false;
gentleResize.delay = 200;
gentleResize.foo = function(){
	console.log(123123);
	//return false;
};
gentleResize.action = function () {
  if (new Date() - this.rtime < this.delay) {
    setTimeout(this.action, this.delay);
  } else {
    timeout = false;
    gentleResize.foo();
  }
}
$(window).resize(function() {
	if(typeof gentleResize.foo === typeof false){
  	return;
  }
  gentleResize.rtime = new Date();
  if (gentleResize.timeout === false) {
    gentleResize.timeout = true;
    setTimeout(gentleResize.action, gentleResize.delay);
  }
});
*/