JavaScript 在 setInterval 调用的函数中使用 screen.width 或 screen.availWidth 时未获得更新值

Question

预期行为：

setInterval 每 2 秒调用 getScreenWidth()。
getScreenWidth() 获取（浏览器）屏幕的当前宽度。
宽度已登录到控制台。
我们更改屏幕宽度，方法是单击 'Restore Down' 按钮（在最小化旁边），然后使用鼠标指针进行更改。
我们在控制台输出中看到更新。

输出：

"1536"

输出始终是一个常数值。（在我的例子中是 1536）

我在 CodePen 上尝试这段代码，我已经试过了：

调整输出大小window。（改变它的宽度）
正在调整浏览器大小。（改变宽度甚至高度）

HTML:

<div id="demo"></div>

脚本：

"use strict";
console.clear();

function getScreenWidth() {
    return screen.availWidth;
    // I've also tried screen.width
}

const demo = document.getElementById("demo");
let count = 0;

const intervalId = setInterval(function () {
    demo.innerHTML = getScreenWidth();
    console.clear();
    console.log(demo.innerHTML);
    console.log(count);
    count++;

    if (count > 30) {
        clearInterval(intervalId);
    }
}, 2000);

既然setInterval每2秒间接调用一次getScreenWidth()，难道screen.width不应该每次都是一个新值吗？

如果我假设它是一个新值，那么这是否意味着 screen.width 不等于浏览器的当前宽度 window？

注意：代码中的count变量只是为了在后台无限期地从运行停止setInterval。

Answer 1

我有相同的屏幕宽度:)

无论如何，您不需要 setInterval 您可以在每次使用 window onresize 事件调整浏览器大小时更改它：

window.onresize = function() {
  screen.width; // 1536 / 1530 etc.
};

您也无法获取浏览器宽度（screen.width）

但您可以使用 jQuery 的 .width() 函数轻松获取它：

$(window).width();

这是一个工作示例（使用 jQuery）：

"use strict";
console.clear();

function getScreenWidth() {
  return $(window).width();
}

const demo = document.getElementById("demo");

window.onresize = function() {
  demo.textContent = getScreenWidth();
  console.clear();
  console.log(demo.textContent);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="demo"></div>

编辑：您也无法使用 JavaScript 调整浏览器 window 的大小。这将是一个巨大的安全问题，您应该庆幸这不可能。

Answer 2

From MDN:

The Screen interface represents a screen, usually the one on which the current window is being rendered, and is obtained using window.screen.

因此，这里的屏幕对象代表设备输出显示，而不是浏览器window。

同样，from MDN：

The Screen.width read-only property returns the width of the screen in pixels.

因此，screen.width（或window.screen.width）不会给我们浏览器 window 宽度，而是屏幕（设备输出屏幕）宽度，这显然不会改变.

要获取浏览器的宽度window，我们需要使用Element.clientWidth.

From MDN 再一次：

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

When clientWidth is used on the root element (the element), (or on if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.

只需更改 getScreenWidth() 即可：

function getScreenWidth() {
    return document.body.clientWidth;
}

现在，当浏览器 window 的宽度改变时，控制台输出也会改变。

JavaScript 在 setInterval 调用的函数中使用 screen.width 或 screen.availWidth 时未获得更新值

JavaScript Not getting an updated value when using screen.width or screen.availWidth in a function which is called by setInterval

javascript

setinterval