Question

我正在学习javascript，并遇到了一个让我完全陷入困境的问题。当我调用setTimeout时，函数参数立即运行，没有延迟。

整体计划（细分）目的：用户输入他们想要为其设置计时器的分钟数。输入的值传递给submitName（），它设置计时器并在计时器关闭时调用timeExpired（）。

相关HTML：

<form id="frm1">
Name: <input type="number" id="fname" name="fname"
step="1" min="1" max="1500" value="1"><br>
</form> 

<p>How many minutes do you want to set the alarm for?</p>

<button id="submit" onclick="submitName();">Submit</button>

Relevnt Javascript：

<script>


function timeExpired()
{
  document.write("Timer off!");
}

function submitName() {
  var x = document.getElementById("fname").value;
  var num = x*60000;

  document.write("<p id='time'>Timer set for: " + x + " minutes.</p>" 
  + "<link rel='stylesheet' href='colours.css'/>");

  setTimeout(function(){timeExpired();},num);
}

</script>

我尝试过的事情：

√比较MDN，W3schools和其他关于堆栈溢出的问题，试图找到解决方案。

√包装匿名功能（如上所述）。有和没有匿名函数的许多变体添加/删除括号（）和分号（）; time ofpirired on function call。

√使用内置的firefox调试器进行调试（未发现错误）。

√检查用户提交的值是否正确分配给x，多个分配给num。

注意：

- 我知道W3学校的声誉可疑，我一直睁大眼睛。

- 我知道document.write（）会覆盖满载屏幕的内容。我只在（用户调用的）弹出窗口中以有限的容量使用它。

Answer 1

如果没有尝试过，我认为document.write()会替换整个文档，包括包含JavaScript函数的脚本标记。因此，该功能不能再执行。

您是否可以尝试仅替换脚本标记旁边的正文中包含的元素的内容？例如：

<body> <div id="content"> <form ... <button ... </div> <script> ... </script> </body>

为什么setTimeout执行timeExpired没有延迟？

1 个答案: