The most efficient way to listen for a resize

In Android when the keyboard shows up, the size of the window will change triggering a resize event on the window.
When the resize event would get fired on a mobile device?

  • When the keyboard shows up
  • When rotating the device
  • When the browser window shrinks because the user uses a multiwindow view

Now we want to listen to this event just once and then act, avoiding to do too much because it would impact on the frame-rate of our application. I could argue here that the keyboard component will only fire one window resize event however this cannot be guaranteed; In the Android market there are literally thousands of different keyboards and might be that one of them is going to fire the resize event more than once, causing difficult to debug behaviors once they get reported by a user.

Also another scenario would be that two resize events are quite close for example when the user does some operations it will hide and show the keyboard quite quickly, firing the event at least twice in few milliseconds.

We need to use setTimeout and clearTimeout in a clever way:


function actionOnResize (e) {
  // do stuff
  console.log('do something');
};
var action;
window.addEventListener('resize', function (e) {
  clearTimeout(action);
  action = setTimeout(function () {
    actionOnResize(e);
  }, 50);
}, false);

A perfect delay

Depending on the application specifications you need to find a good delay for this to fire accordingly. In my scenario a delay of 50ms has been what I needed for.