javascript - 如何通过传递参数在 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

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

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