Как настроить таймер в JavaScript, передав параметр - PullRequest
Новая
       51

Как настроить таймер в JavaScript, передав параметр

0 голосов
/ 04 ноября 2018

Я пытаюсь установить тайм-аут, используя поле ввода 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); 
});

без удачи там.

Любая помощь приветствуется.

Спасибо.

Ответы [ 3 ]

0 голосов
/ 04 ноября 2018

Получить значение после клика вот так 

    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);
    });
0 голосов
/ 04 ноября 2018

Я хотел бы объяснить предыдущий ответ, чтобы вы понимали, где проблема, и как исправить подобные в будущем, а не только решить ее!

Проблема

JavaScript выполняет ваш код следующим образом:

  • В переменной clickbutton хранится элемент button
  • После этого millis сохраняет CURRENT значение вашего ввода, равное NaN
  • Итак, в вашей функции setTimeout второй аргумент передается как NaN, поэтому ничего не происходит, и код запускается мгновенно!

Как это исправить?

Вам необходимо поместить переменную millis в область действия функции addEventListener, чтобы каждый раз, когда пользователь нажимал на кнопку, JS переходил и получал значение вашего ввода (Во время нажатия кнопки , а не время запуска страницы!) . Более того, он меняет значение переменной каждый раз, когда нажимается кнопка!

Заключение

Ваша проблема не в том, чтобы иметь дело с Scope в JavaScript, а в неправильной логике. Вы получаете значение ввода ОДНАЖДЫ, а не каждый раз, когда пользователь нажимает кнопку.

0 голосов
/ 04 ноября 2018

Получите значение в прослушивателе событий щелчка, поскольку в противном случае оно не определено (оно определяется только после того, как вы что-то введете во ввод и решите нажать кнопку): 

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