JQuery: Jak wywołać wydarzenie RESIZE dopiero po zakończeniu zmiany rozmiaru?

Jak wywołać funkcję po ZAKOŃCZENIU zmiany rozmiaru okien przeglądarki?

Próbuję to zrobić w ten sposób, ale mam problemy. Używam funkcji zdarzenia JQuery Resize:

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

Jednak ta funkcja jest wywoływana w sposób ciągły, jeśli użytkownik ręcznie zmienia rozmiar okna przeglądarki. Co oznacza, że ​​może wywołać tę funkcję dziesiątki razy w krótkim odstępie czasu.

Jak mogę wywołać funkcję zmiany rozmiaru tylko raz (po zakończeniu zmiany rozmiaru okna przeglądarki)?

AKTUALIZACJA

Również bez konieczności używania zmiennej globalnej.

Oto przykład wykorzystujący instrukcje jh

Możesz przechowywać identyfikator odwołania do dowolnego setInterval lub setTimeout. Lubię to:

var loop = setInterval(func, 30);

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

Odbicie .

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 
} ) );

Uwaga, możesz użyć tej metody do wszystkiego, co chcesz usunąć (kluczowe zdarzenia itp.).

Dostosuj parametr limitu czasu, aby uzyskać optymalny pożądany efekt.

Możesz używać setTimeout()iw clearTimeout()połączeniu z jQuery.data:

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

Aktualizacja

Napisałem rozszerzenie, aby ulepszyć domyślny on(& bind) -event-handler jQuery . Dołącza funkcję obsługi zdarzenia dla co najmniej jednego zdarzenia do wybranych elementów, jeśli zdarzenie nie zostało wyzwolone dla danego interwału. Jest to przydatne, jeśli chcesz uruchomić wywołanie zwrotne dopiero po opóźnieniu, takim jak zdarzenie zmiany rozmiaru, lub w innym przypadku. 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));

Użyj go jak każdego innego programu obsługi onlub bind-event, z wyjątkiem tego, że możesz przekazać dodatkowy parametr jako ostatni:

$(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);
});

Aby dodać do powyższego, często występują niepożądane zdarzenia zmiany rozmiaru z powodu pojawiających się i znikających pasków przewijania, oto kod, aby tego uniknąć:

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
});

zobacz jsfiddle

Underscore.js ma kilka świetnych metod do tego zadania: throttlei debounce. Nawet jeśli nie używasz podkreślenia, spójrz na źródło tych funkcji. Oto przykład:

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

To jest moje podejście:

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);
    });
});

Odbiornik zdarzeń zmiany rozmiaru przechwytuje wszystkie przychodzące wywołania zmiany rozmiaru, tworzy funkcję limitu czasu dla każdego z nich i zapisuje identyfikator limitu czasu wraz z liczbą iteracyjną poprzedzoną 'id-'(aby można było użyć jako klucz tablicy) w tos-array.

za każdym razem, gdy wyzwalany jest limit czasu, wywołuje funkcję -funkcję fn, która sprawdza, czy był to ostatni limit czasu w tostablicy (funkcja fn usuwa każdy wykonany limit czasu). jeśli prawda (= if(len-1 == 0)), zmiana rozmiaru jest zakończona.

jQuery udostępnia offmetodę usuwania programu obsługi zdarzeń

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