jQuery - ウィンドウの幅の変化を検出しますが、高さの変化は検出しません

Question

私は.resize()関数を使用してウィンドウのサイズ変更イベントを検出していますが、これにより高さと幅の変化が検出されます。

検出する方法はありますかちょうど幅の変更と高さの変更はありませんか？

Answer 1

var width = $(window).width(); 
$(window).on('resize', function(){ 
    if($(this).width() != width){ 
     width = $(this).width(); 
     console.log(width); 
    } 
}); 

Answer 2

あなたは両方のイベントを検出し、それは幅の変化だときだけでコードを実行することができます

var lastWidth = $(window).width(); 

$(window).resize(function(){ 
    if($(window).width()!=lastWidth){ 
     //execute code here. 
     lastWidth = $(window).width(); 
    } 
})   

そして、あなたはをデバウンスイベントをチェックしたい場合があります。

デバウンスでは、呼び出されることなく一定時間が経過するまで関数が再度呼び出されないように強制します。 。のように、「100ミリ秒は、それが呼び出されることなく経過している場合にのみ、この機能を実行

を続きを読む：

---

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://davidwalsh.name/javascript-debounce-function

Answer 3

一つもこのために、この小さなjQueryプラグインを使用することができます。https://github.com/adjohnson916/jquery-resize-dimension

は、より読みやすい独自のコードを保持します：

ResizeDimension.bind('width'); 
$(window).on('resize-width', function() { 
    console.log('resize-width event'); 
}); 

か、単に：

$(window).resizeDimension('width', function() { 
    console.log('resize-width event'); 
}); 

Answer 4

カップルがすでに存在しているにもかかわらずこの種のタスクはパフォーマンス上重要です（ユーザーがウィンドウのサイズを変更している間にウィンドウのサイズ変更イベントが何度もトリガーされる）ので、私は強く成果。 、以下の最適化されたコードを見ていてください：

/* Do not waste time by creating jQuery object from window multiple times. 
* Do it just once and store it in a variable. */ 
var $window = $(window); 
var lastWindowWidth = $window.width(); 

$window.resize(function() { 
    /* Do not calculate the new window width twice. 
    * Do it just once and store it in a variable. */ 
    var windowWidth = $window.width(); 

    /* Use !== operator instead of !=. */ 
    if (lastWindowWidth !== windowWidth) { 
     // EXECUTE YOUR CODE HERE 
     lastWindowWidth = windowWidth; 
    } 
}); 

プラス、あなたはDebounce/Throttleパターンを確認するに興味があるかもしれない - 彼らはこのようなケースでは非常にパフォーマンスを向上させます。