JavaScript / JQuery: $ (window) .resize cara memecat SETELAH ukurannya selesai?

Saya menggunakan JQuery sebagai berikut:

$(window).resize(function() { ... });

Namun, tampaknya jika orang tersebut mengubah ukuran jendela browser secara manual dengan menyeret tepi jendela untuk membuatnya lebih besar / lebih kecil, .resizeacara di atas akan menyala beberapa kali.

Pertanyaan: Bagaimana saya memanggil fungsi SETELAH ukuran jendela browser selesai (sehingga acara hanya menyala sekali)?

Berikut ini modifikasi solusi CMS yang dapat dipanggil di banyak tempat dalam kode Anda:

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

Pemakaian:

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

Solusi CMS baik-baik saja jika Anda hanya memanggilnya sekali, tetapi jika Anda menyebutnya berkali-kali, misalnya jika bagian kode Anda yang berbeda mengatur callback terpisah untuk mengubah ukuran jendela, maka itu akan gagal jika mereka berbagi timervariabel.

Dengan modifikasi ini, Anda memberikan id unik untuk setiap panggilan balik, dan ID unik tersebut digunakan untuk memisahkan semua acara timeout.

Saya lebih suka membuat acara:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Inilah cara Anda membuatnya:

 $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

Anda dapat memiliki ini di file javascript global di suatu tempat.

Saya menggunakan fungsi berikut untuk menunda tindakan berulang, itu akan bekerja untuk kasus Anda:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Pemakaian:

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

Fungsi callback diteruskan, akan dijalankan hanya ketika panggilan terakhir untuk menunda telah dilakukan setelah jumlah waktu yang ditentukan, jika tidak timer akan diatur ulang, saya menemukan ini berguna untuk tujuan lain seperti mendeteksi ketika pengguna berhenti mengetik, dll. ..

Jika Anda memiliki Underscore.js diinstal, Anda dapat:

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

Beberapa solusi yang disebutkan sebelumnya tidak bekerja untuk saya, meskipun mereka lebih umum digunakan. Atau saya telah menemukan ini yang melakukan ukuran pada pekerjaan di jendela:

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});

Terima kasih banyak kepada David Walsh, ini adalah versi vanilla dari garis bawah garis bawah.

Kode:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Penggunaan sederhana:

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

$(window).on('resize', myEfficientFn);

Ref: http://davidwalsh.name/javascript-debounce-function

Sebenarnya, seperti yang saya tahu, Anda tidak dapat melakukan beberapa tindakan tepat ketika mengubah ukuran mati, hanya karena Anda tidak tahu tindakan pengguna di masa depan. Tetapi Anda dapat mengasumsikan waktu berlalu antara dua peristiwa pengubahan ukuran, jadi jika Anda menunggu sedikit lebih dari waktu ini dan tidak ada pengubahan ukuran, Anda dapat memanggil fungsi Anda.
Ide adalah yang kami gunakan setTimeoutdan id untuk menyimpan atau menghapusnya. Misalnya kita tahu bahwa waktu antara dua peristiwa pengubahan ukuran adalah 500ms, oleh karena itu kami akan menunggu 750ms.

var a;
$(window).resize(function(){
  clearTimeout(a);
  a = setTimeout(function(){
    // call your function
  },750);
});

Menyatakan pendengar yang tertunda secara global:

var resize_timeout;

$(window).on('resize orientationchange', function(){
    clearTimeout(resize_timeout);

    resize_timeout = setTimeout(function(){
        $(window).trigger('resized');
    }, 250);
});

Dan di bawah ini gunakan pendengar untuk resizedacara yang Anda inginkan:

$(window).on('resized', function(){
    console.log('resized');
});

Ini bekerja untuk saya. Lihat solusi ini - https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
    //whatever we want to do 
}

Plugin jQuery sederhana untuk acara pengubahan ukuran jendela yang tertunda.

SINTAKSIS:

Tambahkan fungsi baru untuk mengubah ukuran acara

jQuery(window).resizeDelayed( func, delay, id ); // delay and id are optional

Hapus fungsi (dengan mendeklarasikan ID-nya) yang ditambahkan sebelumnya

jQuery(window).resizeDelayed( false, id );

Hapus semua fungsi

jQuery(window).resizeDelayed( false );

PEMAKAIAN:

// ADD SOME FUNCTIONS TO RESIZE EVENT
jQuery(window).resizeDelayed( function(){ console.log( 'first event - should run after 0.4 seconds'); }, 400,  'id-first-event' );
jQuery(window).resizeDelayed( function(){ console.log('second event - should run after 1.5 seconds'); }, 1500, 'id-second-event' );
jQuery(window).resizeDelayed( function(){ console.log( 'third event - should run after 3.0 seconds'); }, 3000, 'id-third-event' );

// LETS DELETE THE SECOND ONE
jQuery(window).resizeDelayed( false, 'id-second-event' );

// LETS ADD ONE WITH AUTOGENERATED ID(THIS COULDNT BE DELETED LATER) AND DEFAULT TIMEOUT (500ms)
jQuery(window).resizeDelayed( function(){ console.log('newest event - should run after 0.5 second'); } );

// LETS CALL RESIZE EVENT MANUALLY MULTIPLE TIMES (OR YOU CAN RESIZE YOUR BROWSER WINDOW) TO SEE WHAT WILL HAPPEN
jQuery(window).resize().resize().resize().resize().resize().resize().resize();

PENGGUNAAN OUTPUT:

first event - should run after 0.4 seconds
newest event - should run after 0.5 second
third event - should run after 3.0 seconds

PLUGIN:

jQuery.fn.resizeDelayed = (function(){

    // >>> THIS PART RUNS ONLY ONCE - RIGHT NOW

    var rd_funcs = [], rd_counter = 1, foreachResizeFunction = function( func ){ for( var index in rd_funcs ) { func(index); } };

    // REGISTER JQUERY RESIZE EVENT HANDLER
    jQuery(window).resize(function() {

        // SET/RESET TIMEOUT ON EACH REGISTERED FUNCTION
        foreachResizeFunction(function(index){

            // IF THIS FUNCTION IS MANUALLY DISABLED ( by calling jQuery(window).resizeDelayed(false, 'id') ),
            // THEN JUST CONTINUE TO NEXT ONE
            if( rd_funcs[index] === false )
                return; // CONTINUE;

            // IF setTimeout IS ALREADY SET, THAT MEANS THAT WE SHOULD RESET IT BECAUSE ITS CALLED BEFORE DURATION TIME EXPIRES
            if( rd_funcs[index].timeout !== false )
                clearTimeout( rd_funcs[index].timeout );

            // SET NEW TIMEOUT BY RESPECTING DURATION TIME
            rd_funcs[index].timeout = setTimeout( rd_funcs[index].func, rd_funcs[index].delay );

        });

    });

    // <<< THIS PART RUNS ONLY ONCE - RIGHT NOW

    // RETURN THE FUNCTION WHICH JQUERY SHOULD USE WHEN jQuery(window).resizeDelayed(...) IS CALLED
    return function( func_or_false, delay_or_id, id ){

        // FIRST PARAM SHOULD BE SET!
        if( typeof func_or_false == "undefined" ){

            console.log( 'jQuery(window).resizeDelayed(...) REQUIRES AT LEAST 1 PARAMETER!' );
            return this; // RETURN JQUERY OBJECT

        }

        // SHOULD WE DELETE THE EXISTING FUNCTION(S) INSTEAD OF CREATING A NEW ONE?
        if( func_or_false == false ){

            // DELETE ALL REGISTERED FUNCTIONS?
            if( typeof delay_or_id == "undefined" ){

                // CLEAR ALL setTimeout's FIRST
                foreachResizeFunction(function(index){

                    if( typeof rd_funcs[index] != "undefined" && rd_funcs[index].timeout !== false )
                        clearTimeout( rd_funcs[index].timeout );

                });

                rd_funcs = [];

                return this; // RETURN JQUERY OBJECT

            }
            // DELETE ONLY THE FUNCTION WITH SPECIFIC ID?
            else if( typeof rd_funcs[delay_or_id] != "undefined" ){

                // CLEAR setTimeout FIRST
                if( rd_funcs[delay_or_id].timeout !== false )
                    clearTimeout( rd_funcs[delay_or_id].timeout );

                rd_funcs[delay_or_id] = false;

                return this; // RETURN JQUERY OBJECT

            }

        }

        // NOW, FIRST PARAM MUST BE THE FUNCTION
        if( typeof func_or_false != "function" )
            return this; // RETURN JQUERY OBJECT

        // SET THE DEFAULT DELAY TIME IF ITS NOT ALREADY SET
        if( typeof delay_or_id == "undefined" || isNaN(delay_or_id) )
            delay_or_id = 500;

        // SET THE DEFAULT ID IF ITS NOT ALREADY SET
        if( typeof id == "undefined" )
            id = rd_counter;

        // ADD NEW FUNCTION TO RESIZE EVENT
        rd_funcs[id] = {
            func : func_or_false,
            delay: delay_or_id,
            timeout : false
        };

        rd_counter++;

        return this; // RETURN JQUERY OBJECT

    }

})();

Dengan asumsi bahwa kursor mouse harus kembali ke dokumen setelah mengubah ukuran jendela, kita dapat membuat perilaku seperti panggilan balik dengan peristiwa onmouseover. Jangan lupa bahwa solusi ini mungkin tidak berfungsi untuk layar yang mendukung sentuhan seperti yang diharapkan.

var resizeTimer;
var resized = false;
$(window).resize(function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
       if(!resized) {
           resized = true;
           $(document).mouseover(function() {
               resized = false;
               // do something here
               $(this).unbind("mouseover");
           })
       }
    }, 500);
});

Inilah yang saya terapkan:

$ (window) .resize (function () {setTimeout (someFunction, 500);});

kita dapat menghapus setTimeout jika kita berharap ukurannya terjadi kurang dari500ms

Semoga berhasil...