使用变量输入设置超时

问题描述

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

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

是否可以从变量输入触发 setTimeout 或者我是否以错误的方式处理？

解决方法

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

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

我希望这就是你想要的

,

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

<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>

,

这是演示代码。

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 个零以使其成为秒。

,

通过使用 <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>