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

【问题标题】：How to set up timer in JavaScript by passing a parameter如何通过传递参数在 JavaScript 中设置计时器
【发布时间】：2018-11-04 16:28:46
【问题描述】：

我正在尝试使用 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); 
});

那里没有运气。

感谢任何帮助。

谢谢。

【问题讨论】：

将const millis = ... 行放在 timout 函数中，否则它不会获取值，而 millis 在加载时只会为空
您对millis 的分配不会延续到未来。使用您的代码，millis 将保持在 在代码行运行时设置的任何值，即使您没有错误地将 const 用于应该更改的值.解决此问题的一种方法是将其转换为函数：jsfiddle.net/khrismuc/m1xqL8ys

标签： javascript ecmascript-6 settimeout arrow-functions

【解决方案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" />

【讨论】：

【解决方案2】：

我想解释一下前面的答案，以便您了解问题出在哪里，以及将来如何修复类似的问题，而不仅仅是解决它！

问题

JavaScript 像这样执行你的代码：

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

如何解决？

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

结论

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

【讨论】：

【解决方案3】：

这样点击后获取价值

    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);
    });

【讨论】：