Controlando el evento resize en JavaScript

Si trabajamos con diseños web responsive, muy probablemente hagas algún tipo de acción con JavaScript para detectar el evento resize. Este evento, como indica su nombre en inglés, indica que la web ha sufrido un cambio de tamaño. Si en lugar de trabajar con JavaScript directamente sois como yo, usuarios de jQuery el ejemplo típico sería el siguiente:

$(window).resize(function() {
  alert("El tamanno ha cambiado!");
});

¿Qué problema nos surgirá tras usar este código tal cual, dependiendo del navegador llegaremos a obtener respuestas diferentes. En Google Chrome he comprobado, por ejemplo, que en cada redimensionamiento en lugar de saltar un sólo evento se disparaban cuatro: uno con el tamaño antiguo, tres con el nuevo. En Firefox el comportamiento por lo visto también puede ser errático (o parecernos para nuestros propósitos).

La forma de solucionarla es la parte interesante de esta entrada, básicamente debemos basarnos en un temporizador, de forma que sólo se dispare una vez para nosotros el evento:

var id;
$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 500);

});

function doneResizing(){
  alert("El tamanno ha cambiado!");
}​

Si 500 milisegundos os parecen mucho porque queréis que el evento se desencadene antes, os aseguro que con valores de 100 sigue funcionando correctamente.