Question

window.onresize = function () {
  initiate();
};

function initiate() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  ...

What I’m trying to do is redraw my canvas whenever the screen turns (mobile web app). The problem I have now that if I turn the screen, $(window).width(); gives the old width, also $(document).width(); doesn’t work. A timer would fix the problem, but there must be a better and cleaner way.

Does anyone know how to fix this?

Answer 1

Your function initiate() will call each pixel window is resized what is wrong. All you need to do is to add some setTimeout for example:

var resizeHandler;
window.onresize = function () {
  clearInterval( resizeHandler );
  resizeHandler = setTimeout( initiate, 500 );
};

I don’t think there is a cleaner way as your event handler calls too much times…