Почему он показывает различное значение «clientWidth» только потому, что я устанавливаю функцию «setInterval»?

Question

Я попытался получить значение clientWidth, чтобы узнать ширину тела. Но я нашел вопрос:

Ниже приведен исходный код:

<input type="text" id="width"><br/> 
<input type="text" id="height"> 
<script> 
function getScreenSize(){ 
    document.getElementById("width").value= document.body.clientWidth; 
    document.getElementById("height").value= document.body.clientHeight; 
} 
getScreenSize(); 
</script> 


<div style="margin-top: 5300px;">foot</div> 

И когда я меняю только getScreenSize(); в setInterval("getScreenSize()",10);, как показано ниже:

<input type="text" id="width"><br/> 
<input type="text" id="height"> 
<script> 
function getScreenSize(){ 
    document.getElementById("width").value= document.body.clientWidth; 
    document.getElementById("height").value= document.body.clientHeight; 
} 
setInterval("getScreenSize()",10); 
</script> 


<div style="margin-top: 5300px;">foot</div> 

без какой-либо причине, значение clientWidth изменилось.

Кто-нибудь знает, почему он изменился только потому, что я установил функцию setInterval?

Answer 1

Это происходит потому, что без setInterval ваш script запускается до добавления div в нижней части.

Итак, когда браузер читает вашу страницу, он запускает скрипт, а затем добавляет нижний div, в момент запуска ширина и высота не учитываются для div. С setInterval за это отвечает div.

Перемещение сценария на дно будет представлять собой тот же ответ в обоих направлениях.

<input type="text" id="width"><br/> 
<input type="text" id="height"> 
<div style="margin-top: 5300px;">foot</div> 
<script> 
function getScreenSize(){ 
    document.getElementById("width").value= document.body.clientWidth; 
    document.getElementById("height").value= document.body.clientHeight; 
} 
getScreenSize(); 
</script> 

Answer 2

Ваш скрипт скорее всего работает до того, как страница будет полностью отображена, поэтому размер страницы может действительно измениться. Вы должны убедиться, что ваш код запускается после выполнения DOM (Document Object Model) (см. window.onload vs $(document).ready() для получения дополнительной информации).