JavaScript kullanılarak bir pencere yeniden boyutlandırıldığında algılansın mı?

Kullanıcı tarayıcı penceresini yeniden boyutlandırmayı bitirdiğinde jQuery veya JavaScript ile bir işlevi tetiklemenin herhangi bir yolu var mı?

Diğer bir deyişle:

1. Kullanıcı tarayıcı penceresini yeniden boyutlandırırken fare yukarı hareketini algılayabilir miyim? Aksi takdirde:
2. Pencere yeniden boyutlandırma işleminin bittiğini tespit edebilir miyim?

Şu anda yalnızca kullanıcı jQuery ile pencereyi yeniden boyutlandırmaya başladığında bir olayı tetikleyebiliyorum

.resize()Genişlik / yükseklik gerçekte her değiştiğinde aşağıdaki gibi almak için kullanabilirsiniz :

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

Burada bir çalışma demosunu görüntüleyebilirsiniz , yeni yükseklik / genişlik değerlerini alır ve görmeniz için sayfada günceller. Olayın gerçekten başlamadığını veya bitmediğini unutmayın , sadece bir yeniden boyutlandırma gerçekleştiğinde "gerçekleşir" ... başka birinin olmayacağını söyleyecek hiçbir şey yoktur.

Düzenleme: Yorumlara göre "sonda" bir olay gibi bir şey istiyormuşsunuz gibi görünüyor, bulduğunuz çözüm bunu birkaç istisna dışında yapıyor (tarayıcılar arası bir şekilde fareyi yukarı kaldırıp duraklatmayı ayırt edemezsiniz, bir son ve bir duraklama için aynı ). Bu olayı biraz daha temiz hale getirmek için şu şekilde oluşturabilirsiniz :

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

Bunun bir yerde bir temel dosya olmasını sağlayabilirsiniz, ne yapmak isterseniz ... o zaman resizeEndtetiklediğiniz yeni olaya şu şekilde bağlanabilirsiniz :

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

Burada bu yaklaşımın bir çalışma tanıtımını görebilirsiniz

Bu ile elde edilebilir onresize JavaScript, bir işlev atayarak GlobalEventHandlers arayüzünün özelliği onresize şöyle, mülkiyet:

window.onresize = functionRef;

Aşağıdaki kod parçacığı, yeniden boyutlandırıldığında pencerenin innerWidth ve innerHeight değerlerini konsolda günlüğe kaydederek bunu gösterir. (Yeniden boyutlandırma olayı, pencere yeniden boyutlandırıldıktan sonra tetiklenir)

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>

Bunu yapmanın başka bir yolu, yalnızca JavaScript kullanarak, şudur:

window.addEventListener('resize', functionName);

Bu, diğer yanıt gibi boyut her değiştiğinde tetiklenir.

functionName pencere yeniden boyutlandırıldığında çalıştırılan işlevin adıdır (sondaki parantezler gerekli değildir).

Yalnızca kaydırma bittiğinde kontrol etmek istiyorsanız, Vanilla JS'de şuna benzer bir çözüm bulabilirsiniz:

Süper Süper kompakt

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

3 olası kombinasyonun tümü birlikte (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') 
}