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

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

В других терминах:

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

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

Ответ 1

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

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

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

Изменить: По комментариям кажется, что вы хотите что-то вроде события "on-end", найденное вами решение делает за несколько исключений (вы не можете различать мышь и пауза в кросс-браузере, то же самое для конца и паузы). Однако вы можете создать это событие, чтобы сделать его более чистым, например:

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

Здесь вы можете увидеть рабочую демонстрацию этого подхода

Ответ 2

Это может быть достигнуто с помощью свойства 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>