Détecter quand une fenêtre est redimensionnée en utilisant JavaScript?

Question

Existe-t-il un moyen avec jQuery ou JavaScript de déclencher une fonction lorsque l'utilisateur termine de redimensionner la fenêtre du navigateur?

En d'autres termes:

1. Puis-je détecter un événement de souris lorsque l'utilisateur redimensionne la fenêtre du navigateur? Autrement:
2. Puis-je détecter la fin d'une opération de redimensionnement de la fenêtre?

Je ne suis actuellement en mesure de déclencher un événement que lorsque l'utilisateur commence à redimensionner la fenêtre avec jQuery

Answer 1

Vous pouvez utiliser .resize() d'obtenir à chaque fois la largeur/hauteur de change, comme ceci:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Vous pouvez afficher d'un travail de démonstration ici, il prend la nouvelle hauteur/largeur des valeurs et des mises à jour dans la page pour vous de voir. Rappelez-vous l'événement n'a pas vraiment de début ou de fin, c'est juste "passe" quand un redimensionnement se produit...il n'y a rien à dire d'autre ne se produira pas.

---

Edit: dans les commentaires, il semblerait que vous voulez quelque chose comme une "fin" de l'événement, la solution que vous avez trouvé cela, à quelques exceptions près (vous ne pouvez pas distinguer entre une souris et une pause dans une manière de croix-navigateur, même pour une fin vs une pause). Vous pouvez créer cet événement afin de le rendre un peu plus propre, comme ceci:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

Vous pourriez avoir ce qui est un fichier de base quelque part, tout ce que vous voulez...vous pouvez lier vers ce nouveau resizeEnd cas vous êtes le déclenchement, comme ceci:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Vous pouvez voir un travail de démonstration de cette approche ici