JS-窗口的宽度从高于800px的像素数量减少到800px以下导致触发动作

Question

A pretty straight forward question here.

I have a desired action that is called when I change the window size and the screen is below 800px in width.

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

What I actually want to do is have the desired action to trigger when the window's width is decreased to below 800 from an amount of pixels that is higher than 800.

For instance, how it functions now is that the desired action will be called any time the window is resized below 800. So adjusting it from 600px -> 800px will cause this action to be triggered again which is not what I want

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