JQuery: Wie rufe ich das RESIZE-Ereignis erst auf, wenn die Größenänderung abgeschlossen ist?

Wie rufe ich eine Funktion auf, wenn die Größenänderung des Browserfensters abgeschlossen ist?

Ich versuche es so zu machen, habe aber Probleme. Ich verwende die JQuery Resize-Ereignisfunktion:

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

Diese Funktion wird jedoch kontinuierlich aufgerufen, wenn der Benutzer die Größe des Browserfensters manuell ändert. Dies bedeutet, dass diese Funktion in kurzen Zeitabständen dutzende Male aufgerufen werden kann.

Wie kann ich die Formatfunktion nur rufen ein einziges Mal (einmal das Browser - Fenster fertig Redimensionierung hat)?

AKTUALISIEREN

Auch ohne eine globale Variable verwenden zu müssen.

Hier ist ein Beispiel mit den Anweisungen von thejh

Sie können eine Referenz-ID für jedes setInterval oder setTimeout speichern. So was:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Entprellen .

function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}


$( window ).resize( debouncer( function ( e ) {
    // do stuff 
} ) );

Beachten Sie, dass Sie diese Methode für alles verwenden können, was Sie entprellen möchten (Schlüsselereignisse usw.).

Passen Sie den Timeout-Parameter an, um den gewünschten Effekt zu erzielen.

Sie können verwenden setTimeout()und clearTimeout()in Verbindung mit jQuery.data:

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

Aktualisieren

Ich habe eine Erweiterung geschrieben , um den Standard on(& bind) -Event-Handler von jQuery zu verbessern . Es fügt den ausgewählten Elementen eine Ereignishandlerfunktion für ein oder mehrere Ereignisse hinzu, wenn das Ereignis für ein bestimmtes Intervall nicht ausgelöst wurde. Dies ist nützlich, wenn Sie einen Rückruf erst nach einer Verzögerung wie dem Größenänderungsereignis oder einem anderen auslösen möchten. 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));

Verwenden Sie es wie jeden anderen onoder bind-event-Handler, außer dass Sie als letzten einen zusätzlichen Parameter übergeben können:

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

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

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

Nur um das oben Gesagte zu ergänzen, ist es üblich, dass unerwünschte Größenänderungsereignisse auftreten, weil Bildlaufleisten ein- und ausgehen. Hier ist ein Code, um dies zu vermeiden:

function registerResize(f) {
    $(window).resize(function() {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(function() {
            var oldOverflow = document.body.style.overflow;
            document.body.style.overflow = "hidden";
            var currHeight = $(window).height(),
                currWidth = $(window).width();
            document.body.style.overflow = oldOverflow;

            var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
            if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
                //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
                this.prevHeight = currHeight;
                this.prevWidth = currWidth;

                f(currHeight, currWidth);
            }
        }, 200);
    });
    $(window).resize(); // initialize
}

registerResize(function(height, width) {
    // this will be called only once per resize regardless of scrollbars changes
});

siehe jsfiddle

Underscore.js bietet einige großartige Methoden für diese Aufgabe: throttleund debounce. Auch wenn Sie keinen Unterstrich verwenden, werfen Sie einen Blick auf die Quelle dieser Funktionen. Hier ist ein Beispiel:

var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);

Das ist mein Ansatz:

document.addEventListener('DOMContentLoaded', function(){
    var tos = {};
    var idi = 0;
    var fn  = function(id)
    {
        var len = Object.keys(tos).length;

        if(len == 0)
            return;

        to = tos[id];
        delete tos[id];

        if(len-1 == 0)
            console.log('Resize finished trigger');
    };

    window.addEventListener('resize', function(){
        idi++;
        var id = 'id-'+idi;
        tos[id] = window.setTimeout(function(){fn(id)}, 500);
    });
});

Der Resize-Event-Listener fängt alle eingehenden Resize-Aufrufe ab, erstellt für jeden eine Timeout-Funktion und speichert die Timeout-ID zusammen mit einer iterierenden Nummer 'id-', die im Array vorangestellt ist (um als Array-Schlüssel verwendet werden zu können) tos.

Jedes Mal, wenn das Timout ausgelöst wird, ruft es die fn-function auf, die prüft, ob dies das letzte Timeout im tosArray war (die fn-Funktion löscht jedes ausgeführte Timout). Wenn true (= if(len-1 == 0)), ist die Größenänderung abgeschlossen.

jQuery bietet eine offMethode zum Entfernen des Ereignishandlers

$(window).resize(function(){
    if(magic == true) {
        $(window).off('resize', arguments.callee);
    }
});