Question

我正在编写一个代码，从文本框中读取此人的姓名，然后显示该名称中每个字母的符号/手势。名称中的每个字母都在FOR循环中读取，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：我尽力了解你的问题＆amp;看来你真的不想＆＃34;刷新＆＃34;页面，但如果你这样做，你应该只是window.location.reload()

为什么循环中的代码在循环内dom更改之前执行？

2 个答案: