JQuery : Comment appeler événement RESIZE qu’une seule fois il ' s fini redimensionnement ?

Question

Comment dois-je appeler une fonction une fois que le navigateur de windows a FINI de redimensionnement?

Je suis en train de le faire comme ça, mais je suis d'avoir des problèmes. J'utilise le JQuery événement de Redimensionnement de la fonction:

$(window).resize(function() {
  ... // how to call only once the browser has FINISHED resizing?
});

Cependant, cette fonction est appelée en permanence si l'utilisateur est manuellement le redimensionnement de la fenêtre du navigateur. Ce qui signifie, il pourrait faire appel de cette fonction dizaines de fois dans le court intervalle de temps.

Comment puis-je appeler la fonction de redimensionnement seulement une seule fois (une fois la fenêtre du navigateur a fini de redimensionnement)?

Mise à JOUR

Aussi, sans avoir à utiliser une variable globale.

Answer 1

Voici un exemple d’utilisation des instructions de thejh

Vous pouvez stocker un id de référence à n’importe quel setInterval ou setTimeout. Comme ça :

Answer 2

Debounce.

Remarque, vous pouvez utiliser cette méthode pour tout ce que vous voulez debounce (événements clés etc.).

Modifier le paramètre de délai d’attente pour optimiser leurs bienfaits souhaités.

Answer 3

Vous pouvez utiliser setTimeout() et clearTimeout() en conjonction avec d' jQuery.data:

$(window).resize(function() {
    clearTimeout($.data(this, 'resizeTimer'));
    $.data(this, 'resizeTimer', setTimeout(function() {
        //do something
        alert("Haven't resized in 200ms!");
    }, 200));
});

Mise à jour

J'ai écrit une extension pour améliorer jQuery par défaut de on (& bind)-gestionnaire d'événements. Il attache une fonction de gestionnaire d'événement pour un ou plusieurs événements pour les éléments sélectionnés si l'événement n'a pas été déclenché pour un intervalle donné. Ceci est utile si vous voulez tirer un rappel seulement après un certain délai, comme l'événement de redimensionnement, ou autre. https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

L'utiliser comme n'importe quel autre on ou bind-gestionnaire d'événements, à l'exception que vous pouvez passer un paramètre supplémentaire, comme un dernier:

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 4

Juste pour ajouter à ce qui précède, qu'il est courant d’obtenir des événements de redimensionnement indésirable à cause des barres de défilement à éclater dedans et dehors, voici un code afin d’éviter que

Answer 5

var lightbox_resize = false;
$(window).resize(function() {
    console.log(true);
    if (lightbox_resize)
        clearTimeout(lightbox_resize);
    lightbox_resize = setTimeout(function() {
        console.log('resize');
    }, 500);
});