如何通过传递参数在JavaScript中设置计时器

Question

我正在尝试使用HTML输入框设置超时,并将其用作参数setTimeout.

这是一个非常简单的任务,但我不是JS开发人员,因此我不确定如何将参数正确传递给箭头函数.

HTML代码仅包含2个元素.

<button id="myElementId">Click me</button>
<input id="milliseconds" type="number" placeholder="number of milliseconds"/>

我的JS代码看起来像:

const clickbutton = document.getElementById('myElementId');
const millis = parseInt(document.getElementById('milliseconds').value, 10);

clickbutton.addEventListener('click', (event) => {
    setTimeout(() => { alert("I work");
  }, millis); // <-- here I don't want to use a static value 
});

但是好像我无法millis从箭头函数中的外部范围获取值.

我也试过传递第二个参数:

const clickbutton = document.getElementById('myElementId');
const millis = parseInt(document.getElementById('milliseconds').value, 10);

clickbutton.addEventListener('click', (event, millis) => {
    setTimeout(() => { alert("I work");
  }, millis); 
});

那里没有运气.

任何帮助表示赞赏.

谢谢.

Answer 1

获取click事件监听器中的值,否则它未定义(仅在输入中键入内容并决定单击按钮后才定义):

const clickbutton = document.getElementById('myElementId');

clickbutton.addEventListener('click', (event) => {
  const millis = parseInt(document.getElementById('milliseconds').value, 10);
  setTimeout(() => {
    alert("I work");
  }, millis);
});

<button id="myElementId">Click me</button>
<input id="milliseconds" type="number" placeholder="number of milliseconds" />