Question

我希望仅在（window.innerWidth <800）时运行函数。
如果调整窗口大小，这也应该起作用。因此，根据浏览器的大小，需要在运行该功能与不执行任何操作之间切换。

我遇到的问题是，如果将窗口的大小调整为800以上，该功能仍在运行。函数只有在刷新后才会执行任何操作。

如何不断检查浏览器大小并依赖其功能？

下面的代码只是一个非常简单的演示，功能将更加复杂。因此，不仅仅是改变颜色。

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

function myFunction() {
  if ((window.innerWidth <= 800)) {
    document.body.style.backgroundColor = "pink";
  }
}

Answer 1

我遇到的问题是，如果将窗口的大小调整为800以上，该功能仍在运行。刷新后该功能什么也不做。

您所显示的代码仅在窗口<= 800px宽时才执行某些操作（在该示例中设置颜色）。但是，如果窗口的宽度大于800像素，它不会取消进行任何操作（将颜色重置为原始值）。它只是什么都不做，而且更早的效果仍然存在。

如果像您的颜色示例一样，您所做的事情可以忍受，那么您需要使用else：

if (window.innerWidth <= 800) {
    // Set the <= 800 state
} else {
    // Set the > 800 state
}

如果您正在做的事与设置body元素的样式有关，请不要像示例中那样直接进行。而是使用class。

如果您不需要支持IE，则：

document.body.classList.toggle("narrow", window.innerWidth <= 800);

这会将narrow设置为<= 800，并将其清除为> 800。

如果您需要支持IE9 +，那么很遗憾，您不能使用toggle的第二个参数，所以：

if (window.innerWidth <= 800) {
    document.body.classList.add("narrow")
} else {
    document.body.classList.remove("narrow");
}

如果您需要支持IE8，则需要一个classList polyfill（或直接对className进行操作）。

Answer 2

这里有两种可能的过渡方式：

从宽度> 800到宽度<800
从宽度<800到宽度> 800

您的resize事件处理程序仅检查第一种情况。这将处理两种情况：

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

function myFunction() {
  if (window.innerWidth <= 800) {
    document.body.style.backgroundColor = "pink";
  } else {
    document.body.style.backgroundColor = "yellow";
  }
}

旁注：这是一种非常低效的方法，因为即使backgroundColor已经设置为“粉红色”，也要重置它。这是一个更有效的解决方案：

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

var bodyColor = "white";
function myFunction() {
  var currentColor = window.innerWidth <= 800 ? "pink" : "white";
  if (currentColor !== bodyColor) {
    document.body.style.backgroundColor = currentColor;
    bodyColor = currentColor;
  }
}

Codepen：https://codepen.io/pen?editors=1111

如果（window.innerWidth <x）无法调整大小，则javascript仅运行函数

2 个答案: