为什么javascript不逐行运行

下面是html/javascript代码，但是当调用函数calc（）时，它的输出是

首先标记，但bot会按顺序运行脚本。 我已经删除了

settimeout（）

函数以使其运行同步

如果有人能解释一下，我们将不胜感激

函数$（id）{
返回文档.getElementById（id）；
}
regex_字段=$（'regx'）；
内容=$（“内容”）；
输出=$（‘输出’）；
flag_字段=$（'flag'）
flag_field.addEventListener（'input'，function（）{
计算（）；
});
content.addEventListener（'input'，function（））{
计算（）；
});
regex_字段。addEventListener（'input'，function（）{
计算（）；
});
函数计算（）{
//setTimeout（函数（）{
var re=new RegExp（regex_field.value，flag_field.value）
控制台日志（re）；
found=content.value.match（re）；
如果（找到）{
$（'output'）。innerHTML=“”；
for（设i=0；i'；
}
$（'output'）。innerHTML+=“”；
}否则{
$（'output'）.innerHTML=“未找到任何内容！”；
}
// }, 500);
}

正则表达式
旗帜


输入内容

内容获取

当您执行
$（'output'）。innerHTML=“”
它立即将
ol
标记添加到
#输出
。由于没有关闭的
无效，DOM会自动关闭它。所以你得到：

<div id="output">
    <ol></ol>
</div>

您要做的是构建innerHTML，然后一次将其全部设置好，这样更像：

if (found) {
    var output = '';
    output = "<ol>";
    for (let i = 0; i < found.length; i++) {
       output += '<li>' + found[i] + '</li>';
    }
    output += "</ol>";
} else {
    output = "Nothing Found!";
}
$('output').innerHTML = output;

if（已找到）{
var输出=“”；
输出=”；
for（设i=0；i'；
}
输出+=“”；
}否则{
output=“未找到任何内容！”；
}
$（'output'）。innerHTML=output；
你赢了我。但那可能是因为我是从寻找一个傻瓜开始的。像这样的肯定有几百个，但是搜索“assign innerHTML”会发现太多的非重复项。我应该首先更好地查找重复项。我会将其保存在我的重复项列表中。
if (found) {
    var output = '';
    output = "<ol>";
    for (let i = 0; i < found.length; i++) {
       output += '<li>' + found[i] + '</li>';
    }
    output += "</ol>";
} else {
    output = "Nothing Found!";
}
$('output').innerHTML = output;