JSFiddle - React, Tailwind, and code Playground
HTML
Resize the window for testing <br />
Width: <span id="width"></span> <br />
Height: <span id="height"></span>
<br /> <br />
Please note that the size is the size of the window within the jsfiddle iframe! <br/> <br />
Code from this StackOverflow answer: <a href="http://stackoverflow.com/a/4541963/34155">http://stackoverflow.com/a/4541963/34155</a>
JavaScript
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(function() {
console.log("doc load");
var $width = $("#width"),
$height = $("#height"),
$window = $(window);
$width.html($window.width());
$height.html($window.height());
$window.resize(function () {
console.log("resize event");
waitForFinalEvent(function () {
console.log("Actual function");
$width.html($window.width());
$height.html($window.height());
}, 500, "some unique id");
});
});