JQuery: Bagaimana cara memanggil event RESIZE hanya setelah SELESAI mengubah ukurannya?

Bagaimana cara memanggil fungsi setelah ukuran jendela browser SELESAI?

Saya mencoba melakukannya seperti itu, tetapi saya mengalami masalah. Saya menggunakan fungsi acara JQuery Resize:

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

Namun, fungsi ini dipanggil terus menerus jika pengguna mengubah ukuran jendela browser secara manual. Artinya, ia mungkin memanggil fungsi ini puluhan kali dalam selang waktu singkat.

Bagaimana cara memanggil fungsi pengubahan ukuran hanya satu kali (setelah jendela browser selesai mengubah ukuran)?

MEMPERBARUI

Juga tanpa harus menggunakan variabel global.

Berikut adalah contoh penggunaan instruksi thejh

Anda dapat menyimpan id referensi ke setInterval atau setTimeout mana pun. Seperti ini:

var loop = setInterval(func, 30);

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

Debounce .

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

Catatan, Anda dapat menggunakan metode ini untuk apa pun yang ingin Anda hapus (peristiwa penting, dll).

Sesuaikan parameter batas waktu untuk mendapatkan efek optimal yang diinginkan.

Anda dapat menggunakan setTimeout()dan clearTimeout()berhubungan dengan jQuery.data:

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

Memperbarui

Saya menulis ekstensi untuk meningkatkan default on(& bind) -event-handler jQuery . Ini melampirkan fungsi pengendali kejadian untuk satu atau lebih kejadian ke elemen yang dipilih jika kejadian itu tidak dipicu untuk interval tertentu. Ini berguna jika Anda ingin mengaktifkan callback hanya setelah penundaan, seperti peristiwa pengubahan ukuran, atau lainnya. 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));

Gunakan seperti yang lainnya onatau bind-event handler, kecuali Anda bisa meneruskan parameter ekstra sebagai yang terakhir:

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

Hanya untuk menambah hal di atas, adalah umum untuk mendapatkan acara pengubahan ukuran yang tidak diinginkan karena bilah gulir muncul dan keluar, berikut adalah beberapa kode untuk menghindarinya:

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

lihat jsfiddle

Underscore.js memiliki beberapa metode bagus untuk tugas ini: throttledan debounce. Meskipun Anda tidak menggunakan Garis Bawah, lihat sumber fungsi ini. Berikut contohnya:

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

Ini adalah pendekatan saya:

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 menangkap semua panggilan resize yang masuk, membuat fungsi timeout untuk masing-masing panggilan dan menyimpan pengenal timeout bersama dengan nomor iterasi yang diawali dengan 'id-'(untuk dapat digunakan sebagai kunci array) di tos-array.

setiap kali, timout terpicu, ia memanggil fn-fungsi, yang memeriksa, apakah itu waktu tunggu terakhir dalam toslarik (fungsi fn menghapus setiap waktu tunggu yang dieksekusi). jika true (= if(len-1 == 0)), pengubahan ukuran selesai.

jQuery menyediakan offmetode untuk menghapus event handler

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