Mendeteksi ketika sebuah jendela diubah ukurannya menggunakan JavaScript?

Apakah ada cara dengan jQuery atau JavaScript untuk memicu fungsi ketika pengguna mengakhiri untuk mengubah ukuran jendela browser?

Dalam istilah lain:

1. Bisakah saya mendeteksi acara mouse up ketika pengguna mengubah ukuran jendela browser? Jika tidak:
2. Bisakah saya mendeteksi ketika operasi pengubahan ukuran jendela selesai?

Saat ini saya hanya dapat memicu suatu peristiwa ketika pengguna mulai mengubah ukuran jendela dengan jQuery

Anda dapat menggunakan .resize()untuk mendapatkan setiap kali lebar / tinggi benar-benar berubah, seperti ini:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Anda dapat melihat demo yang berfungsi di sini , dibutuhkan nilai tinggi / lebar baru dan memperbaruinya di halaman untuk Anda lihat. Ingat acara tidak benar-benar dimulai atau berakhir , itu hanya "terjadi" ketika perubahan ukuran terjadi ... tidak ada yang mengatakan yang lain tidak akan terjadi.

Sunting: Dengan komentar sepertinya Anda menginginkan sesuatu seperti "on-end" event, solusi yang Anda temukan melakukan ini, dengan beberapa pengecualian (Anda tidak dapat membedakan antara mouse-up dan jeda dengan cara lintas-browser, sama untuk akhir vs jeda ). Anda dapat membuat acara itu, untuk membuatnya sedikit lebih bersih, seperti ini:

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

Anda dapat memiliki ini sebagai file dasar di suatu tempat, apa pun yang ingin Anda lakukan ... maka Anda dapat mengikat ke resizeEndacara baru yang Anda picu, seperti ini:

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

Anda dapat melihat demo kerja pendekatan ini di sini

Ini dapat dicapai dengan properti onresize dari antarmuka GlobalEventHandlers dalam JavaScript, dengan menetapkan fungsi ke properti onresize , seperti:

window.onresize = functionRef;

Cuplikan kode berikut menunjukkan ini, dengan konsol mencatat innerWidth dan innerHeight jendela setiap kali diubah ukurannya. (Acara pengubahan ukuran akan menyala setelah jendela diubah ukurannya)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Cara lain untuk melakukan ini, hanya menggunakan JavaScript, adalah:

window.addEventListener('resize', functionName);

Ini menyala setiap kali ukurannya berubah, seperti jawaban lainnya.

functionName adalah nama fungsi yang dieksekusi ketika jendela diubah ukurannya (tanda kurung pada akhirnya tidak diperlukan).

Jika Anda ingin memeriksa hanya ketika gulir berakhir, di Vanilla JS, Anda dapat menemukan solusi seperti ini:

Super sangat kompak

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Semua 3 kemungkinan kombinasi bersama (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}