루프 내에서 dom 변경 전에 코드 after 루프가 실행되는 이유는 무엇입니까?

Question

나는 텍스트 상자에서 그 사람의 이름을 읽고 그 이름의 모든 문자에 대해 서명/제스처를 보여주는 코드를 작성하고있다. 이름의 모든 글자는 FOR 루프에서 읽혀지며,이 글은 읽음 문자에 따라 제스처/기호를 변경합니다. 루프가 작동을 멈춘 후 페이지가 새로 고쳐 져야하지만 알 수없는 이유로 페이지가 루프가 끝나기 전에 새로 고침됩니다.

아래의 간단한 코드로이 상황을 모방하기로 결정했습니다. 코드를 실행하면 루프의 코드가 실행되기 전에 경고가 표시됩니다. 편의를 위해 JSFiddle도 만들었습니다. HERE.

function show_name(name) { 
 
    for (var i = 0, len = name.length; i < len; i++) { 
 
     if (name[i] == "H") { 
 
      var text = document.getElementById("text_tag"); 
 
      text.innerHTML = "Hillary Clinton was a hot baby in the past :D"; 
 
     } 
 
    } 
 
    alert("But Bill preferred Monica :("); 
 
}

<input type="text" id="name" size="18" style=" font-size:17px; margin-left:4px; " onchange="show_name(this.value)" /> 
 
<p id="text_tag"></p>

Answer 1

은 루프가 제대로 실행되고있다. 하지만 텍스트가 DOM에 나타나기 전에 경고를 받고 있습니다. 브라우저가 일괄 적으로 변경 사항을 렌더링하므로 show_name 기능이 완료되면 텍스트가 업데이트됩니다. 루프 내에 console.log/alert를 추가하여 확신 할 수 있습니다. 페이지가 실제로 코드를 새로 고치면 또한 입력 요소 내부의 사용자 데이터를 잃게됩니다 새로 고쳐지고 의미하지 않는다 경고를 표시

function show_name(name) { 
 
    for (var i = 0, len = name.length; i < len; i++) { 
 
     console.log(name[i]); //alert(name[i]); 
 
     if (name[i] == "H") { 
 
      var text = document.getElementById("text_tag"); 
 
      text.innerHTML = "Hillary Clinton was a hot baby in the past :D"; 
 
     } 
 
    } 
 
    setTimeout(function(){ 
 
     alert("But Bill preferred Monica :("); 
 
    },50); 
 
}

<input type="text" id="name" size="18" style=" font-size:17px; margin-left:4px; " onchange="show_name(this.value)" /> 
 
<p id="text_tag"></p>

Answer 2

, 어떤 코드가 수행하는 검색입니다 루프 내부에서 데이터가 변경되었을 때 입력에서 H를 누른 다음 내부에 메시지를 표시합니다.

<p id="text_tag"></p> 

alert("But Bill preferred Monica :("); 

루프 끝 부분에 경고가 표시되도록하려면이 루프 내에서 alert() 위치를 이동하십시오.

function show_name(name) { 
    for (var i = 0, len = name.length; i < len; i++) { 
     if (name[i] == "H") { 
      var text = document.getElementById("text_tag"); 
      text.innerHTML = "Hillary Clinton was a hot baby in the past :D"; 
     } 
     // end of loop 
     if(i==(name.length-1)){ 
     alert("But Bill preferred Monica :("); 
     } 
    } 

} 

PS : 나는 당신의 질문 & 당신이 정말로 페이지를 '새로 고침'하고 싶지 않아 보이지만 당신이 다음 할 경우 단순히 window.location.reload()