JS-窗口的寬度從高於800px的像素數量減少到800px以下導致觸發動作

Question

這里是一個非常簡單的問題。

我有一個所需的操作，當我更改窗口大小並且屏幕寬度小於800px時，將調用該操作。

$(window).resize(function() {
  if ($(window).width() < 800) {
    // this is where the magic happens
  }
});

我真正想做的是 ，當窗口的寬度從高於800的像素數量減少到800以下時，觸發所需的操作。

例如，它現在的功能是在窗口調整到800以下時將調用所需的動作。因此，將其從600px-> 800px調整會再次觸發此動作，這不是我想要的

Answer 1

var previousWidth; //Define global variable

$(window).ready(function() {
    previousWidth = $(window).width(); //Assign initial width when window is ready
};

$(window).resize(function() {
  var newWidth = $(window).width();
  if (previousWidth >= 800 && newWidth < 800 || //Will trigger when going from larger than 800px to smaller than 800px
      previousWidth < 800 && newWidth >= 800) { //Will trigger when going from smaller than 800px to larger than 800px
    // this is where the magic happens
  }
  previousWidth = newWidth; //Update previous width variable
});