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

【问题标题】：Change JS Logic Upon Browser Window Resize在浏览器窗口调整大小时更改 JS 逻辑
【发布时间】：2012-08-03 13:22:47
【问题描述】：

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

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

本着响应式设计的精神，我们能否在分辨率更改时即时调整 JavaScript 逻辑？例如，如果我们的脚本每 10 秒输出一个数字“5”，我们能否将其更改为在将浏览器窗口大小调整为

// 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.

【问题讨论】：

如果您很好奇，我正在尝试修改显示 3 个图像缩略图的轮播滑块脚本，并带有一个下一步按钮。单击该按钮将前进 3 个缩略图。现在，当在较小的屏幕上查看时，我只想显示 1 个缩略图；并且，下一个按钮应该一次前进 1 个缩略图。

标签： javascript css responsive-design

【解决方案1】：

您无法在 CSS 和 JS 之间准确传递变量，但 Javascript 公开了 resizeevent，您可以将其绑定到 window。

例如：

function (event) {
  if (event.srcElement.outerWidth <= 1000 ){
    // do something
  }
}

Working JSFiddle Demo

【讨论】：

【解决方案2】：

如果您想要每 10 秒显示一个数字（基于 with），代码就是这个：

setInterval(function() {
    var num = (window.outerWidth <= 300) ? 7 : 5;
    console.log(i);
}, 10000);

如果您想要在调整窗口大小时显示数字，您应该按照@jbabey 的回答处理window.reseize 事件。

【讨论】：

【解决方案3】：

处理window.resize 事件：

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

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

回答Getting window height/width。

【讨论】：