Detectar quando uma janela é redimensionada usando JavaScript?

Existe alguma maneira com o jQuery ou JavaScript para acionar uma função quando o usuário termina para redimensionar a janela do navegador?

Em outros termos:

1. Posso detectar o evento de mouse up quando o usuário está redimensionando a janela do navegador? De outra forma:
2. Posso detectar quando uma operação de redimensionamento de janela é concluída?

No momento, só consigo acionar um evento quando o usuário começa a redimensionar a janela com jQuery

Você pode usar .resize()para obter sempre que a largura / altura realmente mudar, assim:

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

Você pode ver uma demonstração funcional aqui , ela pega os novos valores de altura / largura e os atualiza na página para você ver. Lembre-se de que o evento realmente não começa ou termina , apenas "acontece" quando ocorre um redimensionamento ... não há nada a dizer que outro não acontecerá.

Editar: pelos comentários, parece que você deseja algo como um evento "on-end", a solução que você encontrou faz isso, com algumas exceções (você não pode distinguir entre um mouse para cima e uma pausa de uma maneira entre navegadores, o mesmo para um final versus uma pausa ). Você pode criar esse evento para torná-lo um pouco mais limpo, assim:

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

Você pode ter este arquivo base em algum lugar, o que você quiser fazer ... então você pode vincular ao novo resizeEndevento que está desencadeando, assim:

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

Você pode ver uma demonstração de trabalho desta abordagem aqui

Isto pode ser conseguido com o onresize propriedade da interface GlobalEventHandlers em JavaScript, através da atribuição de uma função para a onresize propriedade, assim:

window.onresize = functionRef;

O seguinte trecho de código demonstra isso, registrando o console innerWidth e innerHeight da janela sempre que ela é redimensionada. (O evento resize é acionado após o redimensionamento da janela)

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>

Outra maneira de fazer isso, usando apenas JavaScript, seria o seguinte:

window.addEventListener('resize', functionName);

Isso é acionado toda vez que o tamanho muda, como a outra resposta.

functionName é o nome da função que está sendo executada quando a janela é redimensionada (os colchetes no final não são necessários).

Se você quiser verificar apenas quando a rolagem terminar, no Vanilla JS, poderá encontrar uma solução como esta:

Super super compacto

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

Todas as 3 combinações possíveis juntas (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') 
}