Wykryć zmianę rozmiaru okna za pomocą JavaScript?

Czy w jQuery lub JavaScript jest jakiś sposób na wywołanie funkcji, gdy użytkownik zakończy zmianę rozmiaru okna przeglądarki?

Innymi słowy:

1. Czy mogę wykryć zdarzenie podniesienia wskaźnika myszy, gdy użytkownik zmienia rozmiar okna przeglądarki? Inaczej:
2. Czy mogę wykryć zakończenie operacji zmiany rozmiaru okna?

Obecnie jestem w stanie wyzwolić zdarzenie tylko wtedy, gdy użytkownik zacznie zmieniać rozmiar okna za pomocą jQuery

Możesz użyć, .resize()aby uzyskać za każdym razem, gdy szerokość / wysokość faktycznie się zmienia, na przykład:

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

Możesz zobaczyć działające demo tutaj , pobiera nowe wartości wysokości / szerokości i aktualizuje je na stronie, abyś mógł je zobaczyć. Pamiętaj, że wydarzenie tak naprawdę nie rozpoczyna się ani nie kończy , po prostu „dzieje się”, gdy następuje zmiana rozmiaru ... nie ma co powiedzieć, że kolejne się nie wydarzy.

Edycja: według komentarzy wygląda na to, że chcesz mieć coś w rodzaju zdarzenia „on-end”, rozwiązanie, które znalazłeś, robi to, z kilkoma wyjątkami (nie można odróżnić przesunięcia myszy od pauzy w przypadku różnych przeglądarek, to samo na koniec vs pauza ). Możesz jednak utworzyć to wydarzenie, aby było trochę czystsze, na przykład:

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

Możesz mieć gdzieś plik podstawowy, cokolwiek chcesz zrobić ... wtedy możesz powiązać się z tym nowym resizeEndzdarzeniem, które wyzwalasz, na przykład:

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

Można zobaczyć demo roboczą tego podejścia tutaj

Można to osiągnąć za pomocą właściwości onresize interfejsu GlobalEventHandlers w JavaScript, przypisując funkcję do właściwości onresize , na przykład:

window.onresize = functionRef;

Poniższy fragment kodu demonstruje to, rejestrując przez konsolę innerWidth i innerHeight okna po każdej zmianie jego rozmiaru. (Zdarzenie zmiany rozmiaru jest uruchamiane po zmianie rozmiaru okna)

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>

Innym sposobem na zrobienie tego, używając tylko JavaScript, jest:

window.addEventListener('resize', functionName);

To uruchamia się za każdym razem, gdy zmienia się rozmiar, podobnie jak inna odpowiedź.

functionName to nazwa funkcji wykonywanej podczas zmiany rozmiaru okna (nawiasy na końcu nie są konieczne).

Jeśli chcesz sprawdzić tylko po zakończeniu przewijania, w Vanilla JS możesz wymyślić takie rozwiązanie:

Super Super kompaktowy

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

Wszystkie 3 możliwe kombinacje razem (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') 
}