Виявити, коли розмір вікна змінюється за допомогою JavaScript?

Чи можливо за допомогою jQuery або JavaScript запустити функцію, коли користувач закінчить змінити розмір вікна браузера?

Іншими словами:

1. Чи можу я виявити подія миші, коли користувач змінює розмір вікна браузера? Інакше:
2. Чи можу я виявити, коли операція зміни розміру вікна закінчена?

На даний момент я можу викликати подію лише тоді, коли користувач почне змінювати розмір вікна за допомогою jQuery

Ви можете використовувати .resize()щоразу, коли ширина / висота насправді змінюється, наприклад:

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

Ви можете переглянути робочу демонстрацію тут , вона бере нові значення висоти / ширини та оновлює їх на сторінці, яку ви бачите. Пам'ятайте, що подія насправді не починається і не закінчується , вона просто "відбувається", коли відбувається зміна розміру ... немає нічого сказати, що інша не відбудеться.

Редагувати: за коментарями здається, що ви хочете щось на кшталт події в кінці, рішення, яке ви знайшли, робить це за кількома винятками (ви не можете розрізнити мишу та паузу в крос-браузерному режимі, те саме для кінця проти паузи ). Однак ви можете створити цю подію, щоб зробити її трохи чистішою, наприклад:

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

У вас може бути десь базовий файл де-небудь, що б ви хотіли зробити ... тоді ви можете прив’язати до тієї нової resizeEndподії, яку ви запускаєте, наприклад:

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

Ви можете побачити робочу демонстрацію цього підходу тут

Це може бути досягнуто з OnResize властивістю інтерфейсу GlobalEventHandlers в JavaScript, призначаючи функцію до OnResize власності, наприклад , так:

window.onresize = functionRef;

Наступний фрагмент коду демонструє це за допомогою консольного входу в внутрішню ширину та внутрішню висоту вікна, коли воно змінюється. (Подія зміни розміру запускається після зміни розміру вікна)

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>

Ще один спосіб зробити це, використовуючи лише JavaScript, це:

window.addEventListener('resize', functionName);

Це спрацьовує кожного разу, коли розмір змінюється, як і інша відповідь.

functionName - це назва функції, що виконується, коли розмір вікна змінюється (дужки на кінці не потрібні).

Якщо ви хочете перевірити лише час закінчення прокрутки, у Vanilla JS можна запропонувати таке рішення:

Супер Супер компактний

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

Усі 3 можливі комбінації разом (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') 
}