javascript - 在浏览器窗口调整大小时更改 JS 逻辑

Question

随着使用 CSS @media 查询的流行，我们现在可以根据查看网页的分辨率设置网页样式。当您调整浏览器窗口大小时，宽度相关的样式/布局将立即出现。在 CSS 中，这非常简单，例如

// The heart of "responsive design."
@media screen and (max-width: 1000px) { ... }

本着响应式设计的精神，我们能否在分辨率发生变化时即时调整 JavaScript 逻辑？例如，如果我们的脚本每 10 秒输出一个数字“5”，当浏览器窗口大小调整为 <300px 时，我们能否将其更改为输出“7”(以相同的间隔)？

// Default script
setTimeout(function() {
  var i = 5;
  console.log(i);
}, 10000);

// How to change the value of i to 7, upon window resize?
// Ideally, without a page reload.

Answer 1

处理 window.resize事件:

window.onresize = function () {
    // check if the new height/width is <300
    // change your i variable
};

为了使其工作，您的 i 变量必须在调整大小处理程序和您传递给 setTimeout 的匿名变量共享的范围内。

Getting window height/width 的答案.