在 setTimeout (javascript) 中使用毫秒变量

Question

我正在使用文本区域来显示时间，使用输入字段来获取数字，并使用按钮来执行功能：

<textarea name="demo" id="demo"></textarea><br> 
<input type="number" id="seconds" name="seconds"></p><br> 
<button type="button" name="refresh" onclick="refresh()">Refresh after number of seconds.</button>

对于 javascript 部分，我获取输入值并将其存储在毫秒变量中：

// store input as a variable:
var seconds = document.getElementById("seconds").value;
// convert input to a number
var milliseconds = parseInt(seconds, 10);
// convert number to milliseconds
milliseconds *= 1000;

但是当我在 setTimeout 函数中使用这个毫秒变量时，它不起作用:

function refresh() {
  var refreshTime = setTimeout(displayTime, milliseconds);
}

function displayTime() {
  var timeNow = new Date();
  document.getElementById("demo").innerHTML = timeNow.toLocaleTimeString();
}

如果我手动向 setTimeout 函数添加一个数字，它会起作用，所以我想我在创建毫秒变量时做错了什么。有人可以帮助我哪里出错了吗？谢谢！

Answer 1

这是你出错的地方：- 当用户没有输入任何值时，您会在一开始就获得输入的值。因此 setTimeout 收到一个 NaN （因为你试图解析一个空字符串）作为它的参数。

您可以非常轻松地解决这个问题，方法是在每次单击刷新按钮时获取文本框的值。

所以最后的结果应该是这样的：-

function refresh() {
  // store input as a variable:
  var seconds = document.getElementById("seconds").value;
  // convert input to a number
  var milliseconds = parseInt(seconds); // You dont need to pass in a second argument because by default radix is 10.
  // convert number to milliseconds
  milliseconds *= 1000;

  var refreshTime = setTimeout(displayTime, milliseconds);
}

function displayTime() {
  var timeNow = new Date();
  document.getElementById("demo").innerHTML = timeNow.toLocaleTimeString();
}

<textarea name="demo" id="demo"></textarea><br>
<!-- I have added a min attribute to restrict it from being negative -->
<input type="number" min="0" id="seconds" name="seconds"></p><br>
<button type="button" name="refresh" onclick="refresh()">Refresh after number of seconds.</button>

在 setTimeout (javascript) 中使用毫秒变量

Using a variable for milliseconds in setTimeout (javascript)

javascript

settimeout

parseint