JavaScriptを使用してウィンドウのサイズが変更されたことを検出しますか？

ユーザーがブラウザウィンドウのサイズ変更を終了したときに、jQueryまたはJavaScriptで関数をトリガーする方法はありますか？

言い換えると：

1. ユーザーがブラウザウィンドウのサイズを変更しているときにマウスアップイベントを検出できますか？さもないと：
2. ウィンドウのサイズ変更操作がいつ終了したかを検出できますか？

現在、ユーザーがjQueryを使用してウィンドウのサイズ変更を開始したときにのみ、イベントをトリガーできます

次の.resize()ように、幅/高さが実際に変更されるたびにを使用して取得できます。

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

ここで実際のデモを見ることができます。それは新しい高さ/幅の値を受け取り、ページでそれらを更新して表示します。イベントは実際には開始も終了もせず、サイズ変更が発生したときに「発生」するだけです。別のイベントが発生しないと言うことは何もありません。

編集：コメントで、「オンエンド」イベントのようなものが必要なようですが、見つかった解決策はこれを実行しますが、いくつかの例外があります（クロスブラウザの方法でマウスアップと一時停止を区別できない、終了と一時停止についても同じです）。ただし、このイベントを作成して、次のように少しすっきりさせることができます。

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

あなたはここで、このアプローチの作業のデモを見ることができます

これは、を用いて達成することができるさらにonResizeに機能を割り当てることで、JavaScriptでインターフェースGlobalEventHandlersのプロパティさらに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>

JavaScriptのみを使用してこれを行う別の方法は、次のようになります。

window.addEventListener('resize', functionName);

これは、他の回答と同様に、サイズが変更されるたびに発生します。

functionName ウィンドウのサイズが変更されたときに実行される関数の名前です（末尾の角括弧は不要です）。

スクロールが終了したときにのみ確認する場合は、Vanilla JSで、次のような解決策を考え出すことができます。

超超コンパクト

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

3つの組み合わせすべて（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') 
}