javascript - 在屏幕上调整了特定值之后，才调用函数

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

在此示例中，我只想在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
});

最佳答案

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

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

请注意，如果isMobile确实是对象或数组，则它们会在JavaScript中通过引用传递，这意味着使isMobile的值发生变化将使lastIsMobile的值发生变化。不过，布尔值是通过JavaScript中的值传递的，因此lastIsMobile不会以这种方式进行突变。