Обнаружить изменение размера окна с помощью JavaScript?

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

Другими словами:

1. Могу ли я обнаружить событие подъема мыши, когда пользователь изменяет размер окна браузера? В противном случае:
2. Могу ли я определить, когда операция изменения размера окна завершена?

В настоящее время я могу вызвать событие только тогда, когда пользователь начинает изменять размер окна с помощью jQuery

Вы можете использовать, .resize()чтобы получать каждый раз, когда ширина / высота действительно изменяется, например:

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

Здесь вы можете просмотреть рабочую демонстрацию , она принимает новые значения высоты / ширины и обновляет их на странице, чтобы вы могли их увидеть. Помните, что событие на самом деле не начинается и не заканчивается , оно просто «происходит», когда происходит изменение размера ... нечего сказать, что другого не произойдет.

Изменить: по комментариям кажется, что вам нужно что-то вроде «непрерывного» события, решение, которое вы нашли, делает это, с несколькими исключениями (вы не можете различить наведение мыши и паузу в кросс-браузере, то же самое для конца vs пауза ). Вы можете создать это событие, чтобы сделать его немного чище, например:

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

Следующий фрагмент кода демонстрирует это, консоль регистрирует innerWidth и innerHeight окна при каждом изменении его размера. (Событие изменения размера запускается после изменения размера окна)

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