Question

我需要将第一个函数的执行结果打印到innerHTML，而不必等待第二个函数的执行。这两个功能都应通过单击按钮来调用。

应该如何：

<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”，并且仅在完全执行“ two”时才显示结果，即仅在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>

在一个事件中独立执行两个JS函数

2 个答案: