Only call function after after a specific value on screen resize

Question

I'm trying to call a function on screen resize but only if the screen goes over or under a specific value rather than every time the screen is resized.

In this example, I only want to call a function when the isMobile value has changed.

window.addEventListener('resize', () => {
  if (window.innerWidth < mobileSize) {
    isMobile = true;
  } else {
    isMobile = false;
  }
  // call function only isMobile changes from true to false or vice-versa
});

Answer 1

Just store a reference to the last isMobile value, and check if the value changed inside the function:

window.addEventListener('resize', () => {
  const lastIsMobile = isMobile;
  isMobile = window.innerWidth < mobileSize;
  if (lastIsMobile !== isMobile) woohoo()
});

Note that if isMobile is really an Object or an Array, those are pass by reference in JavaScript, which means that mutating the value of isMobile will mutate the value of lastIsMobile . Booleans are pass by value in JavaScript, though, so lastIsMobile won't be mutated in this way.

Answer 2

Try this:

window.addEventListener('resize', () => {
  const isMobilePrevious = isMobile;
  isMobile = window.innerWidth < mobileSize;

  if (isMobilePrevious === isMobile) return;

  // call your function
});

Answer 3

You can store the last value and check for a change:

window.addEventListener('resize', () => {
  const wasMobile = isMobile;
  if (window.innerWidth < mobileSize) {
    isMobile = true;
  } else {
    isMobile = false;
  }
  // call function only isMobile changes from true to false or vice-versa
  if (wasMobile != isMobile) {
    someFunction();
  }
});

But for responsive design I strongly recommend taking a look at CSS media rules .