使用用户输入、JavaScript 设置计时器答案

【问题标题】：Setting a timer using user input, JavaScript使用用户输入、JavaScript 设置计时器
【发布时间】：2020-12-13 20:56:15
【问题描述】：

我对编程很陌生。

对于一个学校项目，我正在尝试设置一个 setTimeout();使用来自用户的输入的功能。这是我的代码：

let header = document.getElementById('header');
let input = document.getElementById('input');
let btn = document.getElementsByTagName('div')[1];
let response1 = document.getElementById('response1');

function playSound() {
  setTimeout(function () {
    var x = document.getElementById("myAudio")
    x.play()
  }, 3000); //input.value?? or 1000 * input.value??
}

通常，如果我想在输入框中访问用户的输入，我会键入 input.value。但是，setTimeout 函数不能将 input.value 识别为可以设置为倒计时的参数。我不知道该怎么办。

任何帮助将不胜感激。

【问题讨论】：

您到底想达到什么目的？你想让用户输入延迟吗？
你能发布你得到的确切错误（控制台输出）吗？
我没有在控制台中收到错误消息。该函数将立即执行，就好像没有超时一样。 IE。无论 input.value 中的数字如何，我的 playSound 函数都会立即执行。

标签： javascript function settimeout

【解决方案1】：

setTimeout函数无法将input.value识别为可设置为倒计时的参数

它确实识别它。如果您遇到错误，那么您的输入很可能是文本输入，在这种情况下，您必须将其值转换为数字，然后才能在 setTimeout 中使用它：

let header = document.getElementById('header');
let input = document.getElementById('input');
let btn = document.getElementsByTagName('div')[1];
let response1 = document.getElementById('response1');

function playSound() {
  setTimeout(function () {
    var x = document.getElementById("myAudio")
    x.play()
  }, Number(input.value));
}

如果输入的值以秒为单位，请使用input.value * 1000。

【讨论】：

我很确定setTimeout 会自动将第二个参数转换为数字。
成功了！非常感谢，我在过去的 2 个小时里试图解决这个问题。
@dmitryguzeev 不，它没有。它只是将输入的任何字符串视为 1，因此 setTimeout(foo, "1000") 与 setTimeout(foo, 1) 相同
@WaisKamal 我在最新的 Firefox 和 Chrome 版本上都对其进行了测试。如果您将“5000”作为第二个参数传递，它会等待 5 秒。
对不起，你是对的。不知道它是如何为 OP 工作的 :)

【解决方案2】：

要动态执行setInterval，需要调用函数而不是输入文本：

创建函数startInterval
在输入文本的事件中调用函数onChangeInterval输入值

<script>
    var intervalId;
    
    function startInterval(_interval) {    
        intervalId = setInterval(function() {
        }, _interval);
    }
    
    function onChangeInterval (interval) {
        interval -= 100;
        clearInterval(intervalId);
        startInterval(interval);
    }
</script>

【讨论】：