在继续循环之前用值更新页面

Question

我创建了一些代码，可以向上或向下舍入输入的数字，具体取决于整数是偶数还是奇数。我已经解决了这个问题，但是现在我想将我的代码放入一个循环中，该循环将不断提示用户输入另一个数字，直到他们输入像“x”这样的值。我想要发生的是页面在再次提示用户之前使用计算值更新。我还无法弄清楚如何做到这一点，因此我的问题在这里。有没有办法做到这一点，还是我的做法都错了？Javascript：function main() {    var n = prompt("Enter A Number\nCan Be A Whole Number Or Decimal Number With One Decimal Place.\nOr Enter x To Exit.");        while (n != "x") {            var nn = 0            if (n.includes(".")) {                var n = parseFloat(n);                q = Math.trunc(n);                if (q % 5 == 0) {                    if ((n % 1) >= 0.5) {                        nn = (Math.ceil(n));                    } else if ((n % 1) < 0.5) {                        nn = (Math.floor(n));                    }                } else {                    if ((n % 1) <= 0.5) {                        nn = (Math.floor(n));                    } else if ((n % 1) > 0.5) {                        nn = (Math.ceil(n));                }            }            document.getElementById("orgNum").innerHTML = "Original Number: " + n;            document.getElementById("roundNum").innerHTML = "Rounded Number: " + nn            setTimeout(main, 5000);        } else {            document.getElementById("orgNum").innerHTML = "Original Number: " + n;            document.getElementById("roundNum").innerHTML = "Rounded Number: Whole Number Was Entered."            setTimeout(main, 5000);    }    setTimeout(main, 5000);    var n = prompt("Enter Another Number\nCan Be A Whole Number Or Decimal Number With One Decimal Place.\nOr Enter x To Exit.")    }}HTML：<div id="wrapper">    <div id="dataEntry">        <input type="button" id="subButton" value="Begin" onClick="main()">    </div>    <div id="dataPrint">        <p id="orgNum">Original Number: </p>        <p id="roundNum">Rounded Number: </p>    </div></div>我在这里缺少什么？任何帮助将不胜感激。

Answer 1

浏览器中的 Javascript 与 ui 一起在单个线程中运行。使用循环接管该线程，正如您的代码尝试执行的那样，将阻止 ui 运行，包括允许用户在输入中输入文本。

您需要使用事件侦听器，而不是您的 while 循环。

您可以将 onkeyup 事件侦听器附加到您的输入，它会查找输入键（键码 13），或者将您的输入放入一个表单并将 onsubmit 事件侦听器附加到该表单。

此事件侦听器将在输入字段中查找“x”字符：如果找到，则完成（您可以隐藏输入和/或在页面上放置一条消息，指示不再需要输入）。

如果找不到 x，请进行四舍五入并清除输入值。完成舍入/清除后，用户将能够输入另一个值，按 Enter 键，这将再次触发事件侦听器，依此类推，直到检测到“x”。