Exécution asynchrone des fonctions en javascript

Question

Je souhaite appeler deux fonctions, par exemple la fonction a() et la fonction b() en parallèle. Ces fonctions sont indépendantes les unes des autres, et disons que le temps nécessaire pour exécuter ces deux fonctions n'est pas fixé. Parfois, la fonction a() prendra plus de temps que la fonction b() et vice versa. Mais il existe une autre fonction c() qui ne devrait s'exécuter que lorsque les fonctions a() et b() sont terminées.

Comment dois-je faire cela en utilisant l'objet différé de jQuery?

Answer 1

Pour ce faire, vous pouvez faire en sorte que les fonctions a() et b() renvoient des objets différés que vous resolve() une fois leur logique terminée. Vous pouvez ensuite exécuter c() une fois les deux fonctions précédentes terminées. Essayez ceci:

function a() { 
 
    var aDef = $.Deferred(); 
 
    setTimeout(function() { 
 
    aDef.resolve('a done'); 
 
    }, 1000); 
 
    return aDef; 
 
} 
 

 
function b() { 
 
    var bDef = $.Deferred(); 
 
    setTimeout(function() { 
 
    bDef.resolve('b done'); 
 
    }, 3000); 
 
    return bDef; 
 
} 
 

 
function c() { 
 
    console.log('all done!') 
 
} 
 

 
console.log('running...'); 
 
$.when(a(), b()).done(function(a, b) { 
 
    console.log(a); 
 
    console.log(b); 
 
    c(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Vous pouvez utiliser jQuery.when() pour le faire. S'il vous plaît lire le document à ce sujet à https://api.jquery.com/jquery.when/

a = function() { 
//your code for function a 
} 
b = function() { 
//your code for function b 
} 

$.when(a(), b()).done(function c() { 
    //your code for function c 
}); 

Answer 3

j'utiliser une variable globale pour déterm un état de fonctionnement et d'exécuter un sondage chaque 100 millisecondes (ou chaque millisecondes si vous avez besoin).

var myStatus = { 
 
    "a": false, 
 
    "b": false 
 
}; 
 

 
function a() { 
 
    myStatus["a"] = true; 
 
    console.log(myStatus['a']); 
 
} 
 

 
function b() { 
 
    myStatus["b"] = true; 
 
} 
 

 
function getStatusText() { 
 
    var s = 'not complete'; 
 
    if (myStatus.a && myStatus.b) { 
 
    s = 'all complete'; 
 
    } else { 
 
    if (myStatus.a) { 
 
     s = 'a complete'; 
 
    } 
 
    if (myStatus.b) { 
 
     s = 'b complete'; 
 
    } 
 
    } 
 
    return s; 
 
} 
 

 
function c() { 
 
    //check operational status 
 
    var statusText = getStatusText(); 
 
    document.getElementById('status').innerHTML = statusText; 
 
} 
 
setInterval(
 
    function() { 
 
    c() 
 
    }, 100);

<button onclick="a()">Set a() complete</button><button onclick="b()">Set b() complete</button> 
 

 
<p>operational status <span id="status"></span></p>

Answer 4

S'il vous plaît se référer Jquery reportons et promettent méthode pour gérer les appels.

https://api.jquery.com/deferred.promise/ ou

https://api.jquery.com/promise/

Answer 5

Ce n'est pas exactement une réponse à la question. Je n'utilise pas report ou quelque chose comme ça.

Mais je veux montrer quelque chose que je fais assez souvent: ajouter un callback onReady, en tant que paramètre à a() et b(). J'ajoute ces rappels à toute fonction auto-écrite qui prend du temps à s'exécuter.

function a(onready) { 
    // let's say we get Ajax data 
    $.ajax({ 
    url: 'data.php', 
    success: function(data) { 
     $('#message').html(data); 
     if(typeof onready == 'function') { 
     onready(); // you might also want to add message as a parameter, like onready(data), or anready('Data okay'), ... 
     } 
    } 
    }); 
} 

function b(onready) { 
    // let's say we sort <table> rows 
    sortTable('my_table', 'my_row', 'ASC'); // this function (not provided here) is not asynchronous, it just takes time before it's done 
    if(typeof onready == 'function') { 
    onready(); 
    } 
} 

function c() { 
    alert('Yippy!'); 
} 

$(document).ready(function() { // or this could be after the client clicks on a button, or so 
    var aReady = false; 
    var bReady = false; 

    a(function() { 
    aReady = true; 
    if(aReady && bReady) { 
     c(); 
    } 
    }); 

    b(function() { 
    bReady = true; 
    if(aReady && bReady) { 
     c(); 
    } 
    }); 

});