使用变量输入设置超时答案

【问题标题】：settimeout using a variable input使用变量输入设置超时
【发布时间】：2020-12-27 15:35:42
【问题描述】：

我想用用户输入的超时时间创建一个 setTimeout。

例如我希望用户能够通过在框中手动输入延迟时间来延迟音频样本的播放。

是否可以从变量输入触发 setTimeout 还是我的方法不对？

【问题讨论】：

是的，当然可以。您尝试过什么/不起作用？
到目前为止我还没有尝试过任何东西。我一直在试图找出如何去做，但没有成功。
到目前为止我的代码。尽管这样做可能是一种非常混乱的方式，但它确实有效。我想创建一个按钮来触发视频播放以及延迟的音频样本播放。我希望更改它，而不是设置石超时，以便最终用户可以设置超时。
请edit提出问题，而不是将代码放入cmets。

标签： javascript html variables settimeout timedelay

【解决方案1】：

是的，您可以通过收集数字并将其用作超时变量来做到这一点。

<input type="number" id="timeout">

那你就可以用.value领取了

var timeout = +document.querySelector("#timeout").value;
setTimeout(my_function(), timeout);

请记住这是毫秒数，因此要将其转换为秒，请将 timeout 乘以 1000。

var timeout = +document.querySelector("#timeout").value;
// convert from milliseconds to seconds
setTimeout(my_function(), timeout * 1000);

这是一个完整的秒数示例。

function timeout() {
    var milliseconds = +document.querySelector("#timeout").value;
    var seconds = milliseconds*1000;
    setTimeout(() => {
        alert("Timeout has ended");
    }, seconds);
}

<input type="number" id="timeout" value="1">
<button onclick="timeout()">Submit</button>

【讨论】：

【解决方案2】：

const delay = parseInt(window.prompt("number in millisecond"));

  setTimeout(() => {
    window.alert("Its took me " + delay + " millisecond to show up");
  }, delay);

我希望这就是你要找的东西

【讨论】：

【解决方案3】：

通过使用<input> 元素，您可以让用户设置延迟值。然后当你想调用setTimeout时，使用那个输入的值作为延迟。

const fire = document.getElementById('fire');
const delay = document.getElementById('delay');

fire.addEventListener('click', () => {
  const duration = Number(delay.value);

  setTimeout(() => {
    alert(`hello after ${duration}ms`);
  }, duration);
});

<label for="delay">Set the delay</label>
<input type="number" id="delay" value="500">
<button type="button" id="fire">Fire</button>

【讨论】：

【解决方案4】：

这里是演示代码。

HTML：

<form>
   <input type="number" name="delayTime"/>
   <button>Submit Time Delay</button>
</form>

Javascript：

const form = document.querySelector("form");
form.addEventListener("submit",(e)=>{
  e.preventDefault();
  
  setTimeout(()=>{
    document.querySelector(".audio").play()
 },parseInt(`${form["delayTime"]000`}));
  
});

注意：您需要以秒为单位给出时间，我只是添加了 3 个零以使其成为秒。

【讨论】：