使用变量输入设置超时

Question

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

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

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

Answer 1

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

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

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

Answer 2

是的，您可以通过收集数字并将其用作超时变量来实现。

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

Answer 3

这是演示代码。

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

Answer 4

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

使用变量输入设置超时

settimeout using a variable input

html

javascript

variables

timedelay

settimeout