Window.resize dans jquery tir plusieurs fois

Vous l'avez obtenu, certains navigateurs déclenchent le redimensionnement de démarrage et de nouveau, tandis que d'autres, comme FF, déclenchent en continu. La solution consiste à utiliser setTimeout pour éviter de tirer tout le temps. Un exemple peut être trouvé ici . Voici le code de la même référence:

 (function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... }); 

Voici un exemple simple, si l'utilisateur arrête de redimensionner pour 500 ms (une demi-seconde) que vous déclarez. ClearTimeout empêche le renvoi constant de votre fonction. Vous pouvez ajuster cette valeur comme bon vous semble. 500 ms peut être trop tôt, vous pouvez l'atteindre à 1000, dépend de ce que vous faites dans la fonction

 var resizeTimeout; $(window).resize(function(){ clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ alert('your function to run on resize'); }, 500); }); 

On dirait que c'est une touche particulière au navigateur. Selon la documentation pour l'événement de resize :

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).

(L'accent est mis)

Une solution de contournement serait de définir une minuterie et de vérifier si les dimensions de la fenêtre ont changé.

Les navigateurs ne déclenchent pas l'événement de redimensionnement de manière cohérente. Pour éviter de tirer constamment, habituellement, un setTimeout est utilisé. Voici un peu plus sur cela:

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

JavaScript / JQuery: $ (fenêtre). Reste comment faire feu après le redimensionnement est terminé?