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

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

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

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

132
aneuryzm 8 Июн 2010 в 14:17

4 ответа

Лучший ответ

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

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

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


Правка . По комментариям кажется, что вы хотите что-то вроде «сквозного» события, решение, которое вы нашли, делает это, за некоторыми исключениями (вы не можете различить «мышку» и «паузу»). кросс-браузерным способом, то же самое для 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
});

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

236
Nick Craver 8 Июн 2010 в 13:13

Этого можно добиться с помощью свойства onresize Интерфейс GlobalEventHandlers в JavaScript, назначая функцию свойству onresize , например:

window.onresize = functionRef;

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

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>
3
JSON C11 7 Апр 2019 в 04:41

Другой способ сделать это, используя только JavaScript, будет следующим:

window.addEventListener('resize', functionName);

Это срабатывает каждый раз, когда размер меняется, как и другой ответ.

functionName - это имя функции, выполняемой при изменении размера окна (скобки на конце не обязательны).

3
James Skemp 5 Фев 2020 в 17:10

Если вы хотите проверить только после завершения прокрутки, в Vanilla JS вы можете найти решение, подобное следующему:

window.onresize = resizeEnd;
var resizeEnded = false;
var timer, tolerance = 5; // 1 - 10
function resizeEnd() {
    timer = setTimeout(function() { 
        resizeEnded = true; 
        console.log('Resize ended at ' + window.innerWidth); 
        console.log('Resize ended at ' + window.innerHeight);
    }, tolerance * 100);
}

ES6 дружелюбный.

window.onresize = resizeEnd
var resizeEnded = false
var timer, tolerance = 5 // 1 - 10
function resizeEnd() {
    timer = setTimeout(() => { 
        resizeEnded = true
        console.log('Resize ended at ' + window.innerWidth)
        console.log('Resize ended at ' + window.innerHeight)
    }, tolerance * 100);
}
0
Claudio Ferraro 6 Мар 2020 в 10:55