javascript - 仅在屏幕调整大小的特定值之后调用函数

Question

我试图在屏幕调整大小时调用一个函数，但只有在屏幕超过或低于特定值时才调用，而不是每次调整屏幕大小时。

在这个例子中，我只想在 isMobile 值改变时调用一个函数。

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

只需存储对最后一个 isMobile 值的引用，并检查该值是否在函数内部更改:

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

请注意，如果 isMobile 确实是一个对象或数组，它们在 JavaScript 中通过引用传递，这意味着改变 isMobile 的值将改变lastIsMobile。不过， bool 值在 JavaScript 中是按值传递的，因此 lastIsMobile 不会以这种方式发生变化。