Détecter quand une fenêtre est redimensionnée à l'aide de JavaScript?

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 montée de la souris lorsque l'utilisateur redimensionne la fenêtre du navigateur? Autrement:
2. Puis-je détecter quand une opération de redimensionnement de fenêtre est terminée?

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

Vous pouvez utiliser .resize()pour obtenir chaque fois que la largeur / hauteur change réellement, comme ceci:

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

Vous pouvez voir une démonstration de travail ici , il prend les nouvelles valeurs de hauteur / largeur et les met à jour dans la page pour que vous puissiez les voir. Rappelez-vous que l'événement ne commence pas ou ne se termine pas vraiment , il "se produit" juste quand un redimensionnement se produit ... il n'y a rien à dire qu'un autre ne se produira pas.

Edit: Par commentaires, il semble que vous vouliez quelque chose comme un événement "on-end", la solution que vous avez trouvée le fait, à quelques exceptions près (vous ne pouvez pas faire la distinction entre une souris levée et une pause de manière cross-browser, la même chose pour une fin vs une pause ). Vous pouvez cependant créer cet événement, pour 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 ceci est un fichier de base quelque part, tout ce que vous voulez faire ... alors vous pouvez vous lier à ce nouvel resizeEndévénement que vous déclenchez, comme ceci:

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

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

Cela peut être réalisé avec la propriété onresize de l'interface GlobalEventHandlers en JavaScript, en attribuant une fonction à la propriété onresize , comme ceci:

window.onresize = functionRef;

L'extrait de code suivant illustre cela, en consignant les données innerWidth et innerHeight de la fenêtre chaque fois qu'elle est redimensionnée. (L'événement de redimensionnement se déclenche après le redimensionnement de la fenêtre)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Une autre façon de faire cela, en utilisant uniquement JavaScript, serait la suivante:

window.addEventListener('resize', functionName);

Cela se déclenche à chaque fois que la taille change, comme l'autre réponse.

functionName est le nom de la fonction en cours d'exécution lorsque la fenêtre est redimensionnée (les crochets à la fin ne sont pas nécessaires).

Si vous souhaitez vérifier uniquement lorsque le défilement est terminé, dans Vanilla JS, vous pouvez proposer une solution comme celle-ci:

Super super compact

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Ensemble des 3 combinaisons possibles (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}