时间戳

首页 > 解决方案 > 如何通过传递参数在 JavaScript 中设置计时器

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

问题描述

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

那里没有运气。

任何帮助表示赞赏。

谢谢你。

标签： javascriptecmascript-6settimeoutarrow-functions

解决方案

获取单击事件侦听器中的值，否则未定义（仅在您在输入中键入内容并决定单击按钮后才定义）：

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

推荐阅读