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-debounce/
• https://davidwalsh.name/javascript-debounce-function

Answer 3

実用的なソリューションに関するいくつかの回答が既にありますが、この種のタスクはパフォーマンスが重要です (ユーザーがウィンドウのサイズを変更している間、ウィンドウのサイズ変更イベントが何度もトリガーされます)。そのため、パフォーマンスに注意することを強くお勧めします。以下の最適化されたコードをご覧ください。

/* 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パターンの確認に興味があるかもしれません。このような場合、パフォーマンスが大幅に向上します。