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的值更改。不过，布尔值是在JavaScript中按值传递的，因此lastIsMobile不会以这种方式进行突变。

Answer 2

尝试一下：

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

  if (isMobilePrevious === isMobile) return;

  // call your function
});

Answer 3

您可以存储最后一个值并检查更改：

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

但是对于响应式设计，我强烈建议您看看CSS media rules。

在屏幕上调整大小后，只有在调用函数之后

3 个答案: