Почему функция оповещения не работает должным образом

Question

Я только что узнал о функциях и пытаюсь протестировать простую функцию:

<button id="testbutton">test</button>
<script type="text/javascript">
  var testTime = ""

  function alertTime(inputTime) {
    inputTime = Date.now();
    alert(inputTime);
  }
  document.getElementById("testbutton").onclick = alertTime(testTime);
</script>

Почему предупреждение появляется сразу после загрузки страницы, а не при нажатии кнопки?

Answer 1

Почему предупреждение появляется, как только я загружаю страницу

Интерпретатор JS находит <script> теги, анализирующие страницу, и выполняет то, что заключено внутри. Внутри вы вызываете alertTime() (имя функции + () приводит к вызову функции) с аргументом testTime. Затем выполнение переходит в alertTime(), где вызывается функция среды браузера alert(), и вы, наконец, видите сообщение.

Answer 2

Функция вызывается / вызывается немедленно с (). Вы должны вызвать / вызвать функцию внутри анонимной функции.

Изменить

document.getElementById("testbutton").onclick = alertTime(testTime);

На

document.getElementById("testbutton").addEventListener('click', function(){ alertTime(testTime) });

Answer 3

Хорошей идеей является сохранение логики c функции, содержащейся внутри себя, если только это не требуется в вашем случае использования.

Таким образом, вам не нужно будет передавать какие-либо аргументы в alertTime функция, если вы установите его в качестве обратного вызова для прослушивателя события щелчка, и он не будет оцениваться.

В вашем случае bind решит проблему.

document.getElementById("testbutton").onclick = alertTime.bind(testTime);

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

const button = document.getElementById("testbutton");

const alertTime = () => {
  const time = Date.now();
  alert(time);
};

button.addEventListener('click', alertTime);

<button id="testbutton">test</button>

Я также рекомендую прочитать о функциях стрелок , так как вы упомянули, что изучаете JS функций

Answer 4

В JavaScript функции вызываются с использованием следующего синтаксиса:

functionName()

При использовании обработчика событий каждое событие будет вызывать функции, назначенные в качестве обработчиков событий. Вы не хотите вызывать функцию, но вместо этого установите функцию значение в качестве обработчика событий, например:

function alertTime(inputTime) {
    inputTime = Date.now();
    alert(inputTime);
}

element.onclick = alertTime;

Вот почему предупреждение появляется немедленно: вы вызываете свою функцию вместо того, чтобы назначать его обработчику событий onclick.

Вы заметите, что это не передается переменной testTime. Хотя вы можете связать текущее значение testTime, "", для каждого отдельного вызова обработчика событий, например так:

element.onclick = alertTime.bind(this, testTime)

... скорее всего, это не то, что вам нужно, так как обработчик событий всегда вызывается с "", даже если testTime изменяется. Вместо этого попробуйте использовать testTime внутри вашей функции напрямую.

Answer 5

На самом деле вы связываете не функцию, а результат выполнения функции , поэтому у вас есть этот побочный эффект.

Теперь вы можете исправить с помощью обратного вызова как это

<button id="testbutton">test</button>

        <script type="text/javascript">
            var testTime = ""

            function alertTime(inputTime) {
                inputTime = Date.now();
                alert(inputTime);
            }

            document.getElementById("testbutton").addEventListener('click', function(){ 
  alertTime(testTime);
});

        </script>