JQuery: RESIZE olayı yalnızca FINISHED yeniden boyutlandırıldığında nasıl çağrılır?

Tarayıcı pencereleri FINISHED yeniden boyutlandırıldıktan sonra bir işlevi nasıl çağırırım?

Öyle yapmaya çalışıyorum ama sorunlar yaşıyorum. JQuery Resize olay işlevini kullanıyorum:

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

Ancak, kullanıcı tarayıcı penceresini manuel olarak yeniden boyutlandırıyorsa bu işlev sürekli olarak çağrılır . Yani bu işlevi kısa zaman aralıklarında onlarca kez çağırabilir.

Yeniden boyutlandırma işlevini yalnızca bir kez nasıl çağırabilirim (tarayıcı penceresi yeniden boyutlandırmayı bitirdiğinde)?

GÜNCELLEME

Ayrıca global bir değişken kullanmak zorunda kalmadan.

İşte jh'nin talimatlarını kullanan bir örnek

Herhangi bir setInterval veya setTimeout için bir referans kimliği saklayabilirsiniz. Bunun gibi:

var loop = setInterval(func, 30);

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

Geri çekil .

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

Bu yöntemi geri almak istediğiniz herhangi bir şey için kullanabilirsiniz (önemli olaylar vb.).

İstenilen optimum etki için zaman aşımı parametresini ayarlayın.

setTimeout()Ve kullanabilirsinizclearTimeout() birlikte jQuery.data:

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

Güncelleme

JQuery'nin varsayılan (& ) -event-işleyicisini geliştirmek için bir uzantı yazdım . Olay belirli bir aralık için tetiklenmemişse, seçilen öğelere bir veya daha fazla olay için bir olay işleyici işlevi ekler. Bu, bir geri aramayı yalnızca yeniden boyutlandırma etkinliği veya başka bir gecikmeden sonra tetiklemek istiyorsanız kullanışlıdır. https://github.com/yckart/jquery.unevent.jsonbind

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

Diğerleri gibi kullanın onbindSon olarak fazladan bir parametre iletebilmeniz dışında, veya olay işleyicisi :

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

Yukarıdakilere eklemek için, kaydırma çubuklarının içeri ve dışarı fırlaması nedeniyle istenmeyen yeniden boyutlandırma olayları almak yaygındır, işte bundan kaçınmak için bazı kodlar:

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

jsfiddle'a bakın

Underscore.js , bu görev için birkaç harika yönteme sahiptir: throttleve debounce. Alt Çizgi kullanmıyor olsanız bile, bu işlevlerin kaynağına bir göz atın. İşte bir örnek:

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

Bu benim yaklaşımım:

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

Resize-event-listener, gelen tüm yeniden boyutlandırma çağrılarını yakalar, her biri için bir zaman aşımı işlevi oluşturur ve zaman aşımı tanımlayıcısını, başına 'id-'(dizi anahtarı olarak kullanılabilir) eklenmiş bir yineleme numarasıyla birlikte kaydeder .tos -dizide ( eklenen .

zaman aşımı her tetiklendiğinde, dizideki fnson zaman aşımı olup olmadığını kontrol eden- işlevi çağırır tos(fn işlevi yürütülen her zaman aşımını siler). true (= if(len-1 == 0)) ise, yeniden boyutlandırma tamamlanır.

jQuery, offolay işleyicisini kaldırmak için bir yöntem sağlar

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