Как вызвать функцию через 5 секунд после клика?

Question

[Амина]

Всем привет, мне нужно вызвать функцию через 5 секунд после клика. Как я могу это сделать?
Вот то что я уже написала

<input class="btn btn-purple btn-block" type="submit" name="up" value="Up" onclick="up()">

function up() {
            function sayHi() {
              alert('Привет');
            }

            setTimeout(sayHi, 5000);
        }

Но это почему-то не работает.

Comments

[Амина]

Вызвать функцию нужно только один раз

[Kovalsky]

Что конкретно не работает? На первый взгляд приведенный код кажется работоспособным. Если проблема только в том, что функцию надо вызвать один раз, то мне кажется тут решение довольно очевидно - считать сколько раз функция выполнена, и убирать обработчик. Кстати вешать и снимать обработчики гораздо проще с помощью add/removeEventListener

[Aves]

проверь console.log(window.up), скорее всего будет undefined

Answer 1

[Дмитрий Беляев]

Функция up должна корректно решать поставленную задачу
Скорее всего проблема в обработчике события.
Атрибуты вроде onclick работают только с глобальным контекстом, лучше их не использовать

Правильнее выбрать input из DOM (например с помощью document.querySelector) и навешать обработчик через метод элемента addEventListener

Так же важно помнить, что выбор элемента нужно делать после того, как он появится на странице, лучше всего для этих целей подходит событие DOMContentLoaded у document:

document.addEventListener('DOMContentLoaded', function() {
  // здесь спокойно можем делать document.querySelector
});

Answer 2

[Митя ТоДаСё]

codepen

function sayHi() {
    setTimeout("alert('Привет')", 5000);
}

<input class="btn btn-purple btn-block" type="submit" name="up" value="Up" onclick="sayHi();">

Comments

[Амина]

Если использовать этот код, то выполнение функции начинается после загрузки страницы. А нужно, чтобы через 5 секунд после клика и только один раз.

[Павло Пономаренко]

Использовать строку для кода (по сути - eval) - отвратительное решение