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

Why the code after loop executes before dom change inside of the loop?

本文关键字：循环 执行 代码 为什么 dom      更新时间：2023-09-26

我正在编写一个代码，从文本框中读取人的名字，然后为该名称中的每个字母显示一个符号/手势。名称中的每个字母都在FOR循环中读取，该循环还根据读取的字母改变手势/手势。在循环停止工作后，页面应该刷新，但由于某些未知的原因，在循环结束之前页面刷新。

我决定用下面所示的简短代码来模拟这种情况。当您运行它时，您将看到在执行循环中的代码之前出现警告。为了方便，我还在这里创建了一个JSFiddle。

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>

你的循环正在正确执行。但是，在文本出现在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>

显示一个警告并不意味着你的页面正在刷新，如果你真的刷新你的代码，你会失去输入元素中的用户数据，你的代码所做的是在输入中搜索H当数据在你的循环中被改变，然后在里面显示一条消息。

<p id="text_tag"></p>
alert("But Bill preferred Monica :(");

如果你想让alert()出现在循环的末尾，那么像这样移动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()

相关文章：