javascript - 在 Javascript 运行时更新 html 文本框

Question

我有一个接受用户输入的 html 文件，然后使用 Javascript 根据这些输入计算一个值。程序完成后，该结果将显示在输入框中。

我想做的是当你点击运行javascript的按钮时，显示结果的输入框会显示'Calculating...'直到计算完成(计算可以花费~5 秒)。但是，如果我输入类似的内容:

document.getElementById('answer').value = 'Calculating...';

在我的 Javascript 代码的最顶部，它似乎并没有在运行时更新输入字段。相反，程序运行，然后结果最终在输入字段中更新。

有人知道我如何在运行程序时更新输入字段，然后在程序完成后用结果再次更新它吗？

谢谢!

编辑:这是对我的代码的更好解释

<td colspan=1 align=left><input id="button" value="Calculate" onclick=calculate(this.form.type.value,this.form.d.value,this.form.c.value,this.form.freq.value)>
<input id="answer" readonly="true">
</td>
</tr>

function calculate(type,d,c,f) {
    //Performs some calculation
    document.getElementById('answer').value = TS;
}

Answer 1

那是因为在您的 JavaScript 代码段完成之后才会发生重新绘制答案元素的事件(因为浏览器在队列中安排了这些事情)。

您需要做的是让您的 JavaScript 在计算开始之前中断队列:

• 将值更新为“正在计算”(将重新绘制放在队列末尾)

• 使用 setTimeout() 设置定时器 0 秒(定时器启动计算代码)

• 当计时器立即触发时，它将把对计算代码的调用放在队列的末尾，在元素重新绘制之后。

  <script>
  document.getElementById('answer').value = 'Calculating...';
  setTimeout( your_calculation(), 0);
  </script>
  

这样，您的 JavaScript 将设置字段值、设置计时器并完成。然后队列中的下一个是重新绘制答案元素；然后计时器启动并启动计算逻辑。