Javascript Girl
  1. Javascript Girl
  3. Pourquoi le jQuery redimensionne-t-il l'événement deux fois?
Intereting Posts
Question sur le pointeur Javascript vers une propriété d'objet JavaScript Calc Année et mois entre 2 dates Famille parent cible contenant l'iframe de l'iframe Les navigateurs tronquent les valeurs de bordure en nombres entiers Mettre en œuvre une fonction 'une fois' en JavaScript Gérer plusieurs onglets (mais même utilisateur) dans socket.io Angularjs – $ http success vs then Document de simulation de test d'unité angulaire js Comment changer la couleur de la police dans un script existant? Variable pour img src = Ajouter <TR> à un <TABLE> avec .appendChild Ordre de chargement d'images en html et css Backbone.js – Coffeescript s'étend Ajouter et supprimer la classe active à partir d'un lien de navigation Comment obtenir un mot sous le curseur en utilisant JavaScript?

Pourquoi le jQuery redimensionne-t-il l'événement deux fois?

Je viens de remarquer que l'événement de redimensionnement jquery se déclenche à chaque fois que la fenêtre du navigateur est redimensionnée. Je ne peux pas trouver de documentation en listant ce comportement par défaut. J'ai testé ceci dans les dernières versions de Chrome et Firefox, en utilisant jQuery 1.4 et 1.5.

Est-ce que quelqu'un d'autre voit ce comportement? Y a-t-il une raison particulière?

Mise à jour : cela se produit si je clique une fois sur le bouton de maximisation de la fenêtre du navigateur. Je comprends que si je traîne manuellement la fenêtre sur une taille différente, l'événement sera déclenché à plusieurs reprises, mais ce ne devrait pas être le cas avec le bouton maximiser.

Le code utilisé est celui ci-dessous. Le texte redimensionné du navigateur est émis deux fois: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> <script type="text/javascript"> $(window).resize(function(){ console.log('Browser Resized'); }); </script> <body> </body> </html>

Ce n'est pas un problème de jQuery. Cela dépend de la mise en œuvre du navigateur. Le navigateur décide quand déclencher le «redimensionnement». Et vous pouvez utiliser window.onresize = function () {…} pour tester. Ce sera le même. Rien à voir avec jQuery. J'ai testé sur Win7 chrome, il a été renvoyé deux fois, et dans Win7 Opera / Safari, il est tiré une fois.

JQuery: Comment appeler l'événement RESIZE seulement une fois qu'il a terminé le redimensionnement?

Indique qu'au moins d'autres personnes ont ce problème. En 1.3.2, il a été répertorié comme un bug à cause de quelque chose avec le système d'événements: http://benalman.com/code/projects/jquery-resize/docs/files/jquery-ba-resize-js.html

Voici une solution simple au problème avec setTimeout .

JQuery 

 var resizeTimeout $(window).resize(function(){ clearTimeout(resizeTimeout) resizeTimeout = setTimeout(function(){ console.log("resized") },100) });

JavaScript 

 var resizeTimeout window.addEventListener("resize", function(){ clearTimeout(resizeTimeout) resizeTimeout = setTimeout(function(){ console.log("resized") },100) })

J'ai testé le présent cas, et j'ai également deux appels. Donc, je pense, etc … est-ce un bug, n'est-ce pas, c'est un appel de fonction en cluster avant / après … Et je reviens à la documentation de JQuery pour redimensionner ():

Le code dans un gestionnaire de redimensionnement ne doit jamais compter sur le nombre de fois que le gestionnaire est appelé. Selon la mise en œuvre, le redimensionnement des événements peut être envoyé continuellement à mesure que le redimensionnement est en cours (le comportement typique dans les navigateurs Internet Explorer et WebKit tels que Safari et Chrome), ou une seule fois à la fin de l'opération de redimensionnement (le comportement typique dans Certains autres navigateurs tels que Opera).

Un autre mot est-il nécessaire?