Does the fire function in front of the window resize the contents when the orientation changes?

Question

so I created a mobile webapp and try to hide the layout permutations after the user has turned the phone (I have the portrait and landscape layout given by js).

I thought I should set $('body').display = "none";when the size changes and the body fades out again after a second or so, however shuffling still happens before it display = "none"starts working.

Is there a way to run the function as soon as the page rotates so that I can hide the permutation elements? I also tried listening on onorientationchange, but they seem to fire right after the event.

Answer 1

:

$(window).resize(function(){
   $('body').hide();
   setTimeout(function(){
      reshuffle();
      $('body').show();
   }, 100);//100ms
});

Answer 2

:

$.when($('body').hide()).then(function() {
     $(window).resize(function(){
         setTimeout(function(){
             reshuffle();
         }, 100);//100ms
     });
});