Aides sur les promesses

juju.92
Javascript

Bonjour,

Je me familiarise tout juste avec les promesses en JS mais je bloque sur un point.

Le système que je veux pour l'exemple est constituer de 3 fonctions ( Score_slider_experience_animation / test_update / Event_animation )

Je veux dans un premier temps animer une barre d’expérience, lorsque l'animation est terminée je veux updater les valeurs dans la bdd et ensuite je veux récupérer ces valeurs pour afficher un pop up...

Mes fonctions marchent le problème est lorsque je veux enchaîner les 3 d'un coup à l'aide des promesses, la dernière n'est pas exécute ?!

function test_update(){
    var deferred = $.Deferred();

    $.ajax(
    {
        url: 'http://localhost:8890/app/projet/index.php/game/ajax_events',
        type: 'GET',
        //data: $data,
        success: function(data){
            setTimeout(function() {
                console.log(data);
                deferred.resolve(data);
            }, 2000);
        },
        error: function (request, status, error) 
        {
            console.log(request.responseText);
            console.log(error);
        }
    });

    return deferred.promise();
}

/* Fonctionne seul
$.when(Score_slider_experience_animation(pourcentage))
.done(function(){
    test_update();
});
*/

/* Fonctionne seul
$.when(test_update())
.done(function(result){
    Event_animation(result);
});
*/

//La derniere fonction ne s execute pas

$.when(Score_slider_experience_animation(pourcentage))
.done(function(){
    test_update();
})
.done(function(result){
    Event_animation(result);
});

Comme mis dans le code si j’enchaîne 2 fonctions cela fonctionne mais si je mets les 3 la dernière n'est pas exécuté ...

EDIT : Si je fais ceci ça fonctionne mais estce bien comme cela qu'il faut faire ?

Score_slider_experience_animation(pourcentage)
.then(function()
{
    test_update().then(function(result)
    {
        Event_animation(result);
    });
});

2 réponses

Maenhyr
Réponse acceptée

Il te faut retourner ta promesse dans ton done() si tu veux pouvoir les enchainer.

$.when(Score_slider_experience_animation(pourcentage))
// res1 sera le resultat de Score_slider_experience_animation(pourcentage)
.done(function(res1) {
    // il faut retourner la promesse pour pouvoir enchainer les .done()
    return test_update();
})
// res2 sera le resultat de test_update();
.done(function(res2){
    Event_animation(res2);
});
juju.92
Auteur

Merci pour ta réponse cela me mets sur la voie mais il doit y avoir quelquechose que je n'ai pas bien compris :s

J'ai changé legerement mon systeme , je veux dans un premier temps faire mes update dans la bdd, ensuite en fonction de ma bdd creer un tableau qui liste les evenements et une fois que le tableau est complet j'execute le reste de mon code.

var $event_manager = {
   event : []
}

$.when(
    // Je fais les updates avant les animations
    Update_user($statut_question, $score_winning, $new_pourcentage_experience),
    Update_reponse($statut_question, $score_winning),
).done(function(res1){
    return Event_create('badge', $event_manager).done(function(){
        console.log($event_manager);
    });
}).done(function(res2){
     console.log($event_manager);
});

Dans les 2 "console.log" je recupere mon tableau mis a jour avec les evenements, le probleme est que dans le premier "console.log" j'obtiens bien un tableau mis a jour car dans la console j'ai ceci {event: Array(1)}, en revanche dans le 2eme "done" j'ai bien mes valeurs dans mon tableau mais la console donne ceci : {event: Array(0)}

Ma fonction event_create :

function Event_create($type, $event_manager){
    var $data = {
        type  : $type,
    };

    var deferred = $.Deferred();
    $.ajax(
    {
        url: 'http://localhost:8890/app/armee_project/index.php/game/ajax_events_condition',
        type: 'POST',
        data: $data,
        success: function(result){
            data = $.parseJSON(result);
            $event_manager.event.push(data);
            deferred.resolve(data);
        },
        error: function (request, status, error) 
        {
            console.log(request.responseText);
            console.log(error);
        }
    });
    return deferred.promise();
}