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

Answer 2

像这样点击后获得价值

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

    clickbutton.addEventListener('click', (event) => {
        // get value here after you click
        // this part run later wher you click
        const millis = parseInt(document.getElementById('milliseconds').value, 10);
        
        setTimeout(() => { alert("I work");
        }, millis);
    });

Answer 3

我想把之前的回答解释一下，让你明白问题出在哪里，以后遇到类似问题怎么解决，不只是解决了！

问题

JavaScript 像这样执行你的代码：

clickbutton 变量存储您的 button 元素
之后，millis 会保存输入的 CURRENT 值，该值等于 NaN
因此，在您的 setTimeout 函数中，您将第二个参数作为 NaN 传递，这就是为什么没有任何反应，代码立即运行！

如何解决？

你需要把你的 millis 变量放在 addEventListener 函数范围内，这样每当用户点击按钮时，JS 就会去获取你输入的值 （点击按钮时，不是启动页面时！）。此外，每次单击按钮时它都会更改变量的值！

结论

你的问题不在于处理JavaScript中的Scope，而是逻辑不正确。 您获得输入的值一次，而不是每次用户单击按钮时。

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

How to set up timer in JavaScript by passing a parameter

javascript

settimeout

ecmascript-6

arrow-functions

问题

如何解决？

结论