4

In javascript I have this window resize event defined

    $(window).resize(function() {

    })

but inside, I need to get width of elements. The problem is, the dimensions I am getting are for the state of how it looked before the reflow, when I need to get the dimensions after the reflow.

I tried putting a timeout of 1ms, but it doesn't seem to work. If I do 100ms, then it does. But I don't link this method, is there a better way?

EDIT: The function gets called once but its just that it needs to wait until after the redraw.

Thanks

omega
  • 40,311
  • 81
  • 251
  • 474
  • 3
    Possible duplicate of [jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?](http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac) – Andrew Cheong Aug 16 '16 at 18:59
  • 1
    It's not that I'm getting multiple event fires on the resize (i.e. it only gets called once), but I just need to wait until after the browser redraw. – omega Aug 16 '16 at 19:03
  • 1
    The resize event is fired after the document has been resized, but apparently fires before all redrawing has been completed. Maybe it´s possible to make use of RequestAnimationFrame to determine if the browser is (almost) done. See https://developer.mozilla.org/en-US/docs/Web/Events/resize and https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame – yezzz Aug 16 '16 at 20:47

1 Answers1

0

You should use document.ready like this: 

$(document).ready(function(){
  $(window).resize(function() {
    ///Your code
  });
});
Maciej Małecki
  • 2,725
  • 19
  • 29
  • 1
    I did, but that's not what I mean. The redraw happens on every resize. So **inside** the resize, I need to somehow wait for the redraw to finish. – omega Aug 16 '16 at 19:05