Выполнить две JS функции в одном событии независимо

Question

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

Как и должно быть:

<p id="t1">Log</p>
<script>
document.getElementById('t1').innerHTML = '1';  

setTimeout(function afterTwoSeconds() {
  document.getElementById('t1').innerHTML = '2';
}, 2000);
</script>

Сначала появляется «1», затем через две секунды «2».

Если я добавлю в событие кнопки две функции, то результат «Один» будет ждать, пока «Два» не завершится, и «1» не появится:

<p id="t1">Log</p>
<input type=button value="two functions" onclick="one(); two();">

<script>
function one() {
  document.getElementById('t1').innerHTML = '1'; 
}

function two() {
  var date = new Date();
  var curDate = null;
  do { curDate = new Date(); }
  while(curDate-date < 2000);
  document.getElementById('t1').innerHTML  = '2';
}
</script>

Если я вызываю «Два» в качестве обратного вызова из « Один ", результат тот же," 1 "также не появляется:

<p id="t1">Log</p>
<input type=button value="callback" onclick="one_callback(two);">

<script>
function one_callback(callback) {
  document.getElementById('t1').innerHTML = '1'; 
  callback();
}

function two() {
  var date = new Date();
  var curDate = null;
  do { curDate = new Date(); }
  while(curDate-date < 2000);
  document.getElementById('t1').innerHTML  = '2';
}
</script>

Как получить результат из функции" Один ", не ожидая выполнения" Два "?

Answer 1

Я думаю, что вы должны использовать функцию setTimeout или setInterval.

function one_callback(callback) {
  document.getElementById('t1').innerHTML = '1'; 

  setTimeout(function() {callback(); }, 2000);
}

function two() {  
  document.getElementById('t1').innerHTML  = '2';
}

Answer 2

Спасибо, Хе Чжи Юн. Но я пока не понимаю. Это работает так:

<script>
function one_callback(callback) {
  document.getElementById('t1').innerHTML = '1'; 
  callback();
}

function two() {
  setTimeout(function() { 
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < 2000);
    document.getElementById('t1').innerHTML  = '2';
   }, 0);
}
</script>

, но когда я убираю setTimeout, «1» не появляется, а результат появляется только тогда, когда «два» полностью выполняется, то есть «2» только через 2 секунды:

<script>
function one_callback(callback) {
  document.getElementById('t1').innerHTML = '1'; 
  callback();
}

function two() {
//  setTimeout(function() { 
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < 2000);
    document.getElementById('t1').innerHTML  = '2';
//   }, 0);
}
</script>