爲什麼在循環內部更改dom之前的代碼？

我正在編寫一個代碼，從文本框中讀取此人的名稱，然後爲該名稱中的每個字母顯示一個符號/手勢。名稱中的每個字母都在FOR循環中讀取，並根據讀取的字母改變手勢/符號。循環停止工作後，頁面應該刷新，但由於某些未知原因，頁面在循環結束之前刷新。爲什麼在循環內部更改dom之前的代碼？

我決定用下面簡要的代碼模擬這種情況。當你運行它時，你會看到在執行循環中的代碼之前會出現警報。爲了方便，我還創建了一個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>

來源

2016-09-05 Anar Kazimov

我沒有看到任何代碼可以刷新當前片段中的頁面。你能告訴我們整個代碼嗎？ – ifvictr

'alert'出現在for循環之後。如果你在for循環之後放置一個'window.location.reload（）'，它可能會變得太快以致於看不到任何事情正在發生。 – putvande

你可以使用'setTimeOut（function（）{/ *你的代碼重新加載頁面* /}，/ *時間直到重新加載* /）' – Lucas

你的循環被正確執行。但是在文本出現在dom中之前，您會收到警報。因爲瀏覽器批量渲染更改，所以當它完成後，它會更新文本。您可以確定在循環中添加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>

來源

2016-09-05 17:49:50

有沒有辦法讓文本出現在警報之前？ –

是的，但它會異步，通過將警報代碼放在setTimeout裏面像下面** setTimeout（function（）{alert（「但比爾首選莫妮卡:(」）;}，50）; ** –

代碼編輯以顯示警報出現文字後。 –

顯示的警報並不意味着你的網頁獲得的刷新，如果你還居然刷新你的代碼，你就失去了輸入元素中的用戶數據，你的代碼做的是搜索對於輸入中的H，當數據在你的循環內部被改變時，然後在裏面顯示一條消息。

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

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

如果要在警報是在循環的末尾，則警報（）的位置偏移這樣的循環中。

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()

來源

2016-09-05 17:53:04

爲什麼在循環內部更改dom之前的代碼？

回答

相關問題