J'ai besoin d'imprimer un résultat de l'exécution de la première fonction vers innerHTML, sans attendre l'exécution de la deuxième fonction. Les deux fonctions doivent être appelées en cliquant sur un bouton.

Comment ça devrait être:

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

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

Apparaît d'abord "1", puis après deux secondes "2".

Si je mets dans le bouton événement deux fonctions par conséquent, le résultat de "One" attend jusqu'à ce que "Two" se termine, et "1" ne s'affiche pas:

<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>

Si j'appelle "Two" comme rappel de "One", le résultat est le même, "1" n'apparaît pas non plus:

<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>

Comment puis-je obtenir un résultat de la fonction "One" sans attendre l'exécution de "Two"?

-1
Ivan Dragov 18 avril 2020 à 14:04

2 réponses

Meilleure réponse

Je pense que vous devriez utiliser la fonction setTimeout ou setInterval.

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

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

function two() {  
  document.getElementById('t1').innerHTML  = '2';
}
1
user11133653user11133653 18 avril 2020 à 11:09

Merci, He Zhi Yong. Mais je ne comprends pas encore. Cela fonctionne comme il se doit:

<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>

Mais quand je range setTimeout, "1" n'apparaît pas, et le résultat n'apparaît que lorsque "two" est complètement exécuté, c'est-à-dire "2" seulement après 2 secondes:

<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>
0
Ivan Dragov 19 avril 2020 à 08:39