預期行為：
setIntervalgetScreenWidth()每 2 秒呼叫一次。getScreenWidth()獲取（瀏覽器）螢屏的當前寬度。- 寬度登錄到控制臺。
- 我們改變螢屏寬度。
- 我們在控制臺輸出中看到了更新。
輸出：
"1536"
輸出始終是一個恒定值。（在我的情況下是 1536）
我正在 CodePen 上嘗試此代碼，并且嘗試過：
- 調整輸出視窗的大小。（改變它的寬度）
- 調整瀏覽器大小。（改變寬度甚至高度）
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是getScreenWidth()每 2 秒間接呼叫一次，不screen.width應該每次都是一個新值嗎？
如果我假設它是一個新值，那么這是否意味著screen.width不等于瀏覽器視窗的當前寬度？
注意：count代碼中的變數只是為了setInterval在后臺無限期停止運行。
uj5u.com熱心網友回復：
我有相同的螢屏寬度:)
無論如何，setInterval每次使用 windowonresize事件調整瀏覽器大小時，您都不需要更改它：
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 調整瀏覽器視窗的大小。這將是一個巨大的安全問題，您應該慶幸這是不可能的。
uj5u.com熱心網友回復：
來自 MDN：
Screen 介面代表一個螢屏，通常是當前視窗正在渲染的螢屏，它是使用 window.screen 獲得的。
因此，這里的螢屏物件代表設備輸出顯示，而不是瀏覽器視窗。
再次，來自 MDN：
Screen.width 只讀屬性回傳以像素為單位的螢屏寬度。
因此，screen.width(或window.screen.width) 不會為我們提供瀏覽器視窗寬度，而是螢屏（設備輸出螢屏）寬度，這顯然不會改變。
要獲取瀏覽器視窗的寬度，我們需要使用Element.clientWidth.
再次來自 MDN：
對于行內元素和沒有 CSS 的元素，Element.clientWidth 屬性為零；否則，它是元素的內部寬度（以像素為單位）。它包括填充但不包括邊框、邊距和垂直滾動條（如果存在）。
當在根元素（元素）上使用 clientWidth 時（或者，如果檔案處于怪癖模式），則回傳視口的寬度（不包括任何滾動條）。
只是改變getScreenWidth()會做：
function getScreenWidth() {
return document.body.clientWidth;
}
現在，當瀏覽器視窗的寬度發生變化時，控制臺輸出也會發生變化。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/357528.html
標籤：javascript 设置间隔
上一篇：ES6Promises奇怪地從自定義js物件中提取正確的值
下一篇：單擊下拉按鈕時傳遞資料