Ajaxez la chaîne et exécutez-la en séquence. Jquery différé

J'ai 3 processus qui a besoin d'ajax pour terminer. Mais il est asynchrone et il ne parvient pas à faire ce que je voulais faire..

Permet de dire:

function a(param1, param2) {
     $.post(..., function(result){
         if(result){
            b();
         } else {
            console.log("failed a");
         }
     })
}

function b() {
      $.post(..., function(result){
         if(result){
            c();
         } else {
            console.log("failed b");
         }
     })
}

function c() {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
     })
}

Je veux exécuter comme ce

a
b
c

Que le code fonctionne parfaitement, comme vous pouvez le voir..
mais si l'utilisation d'une boucle.

 var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

 $.each(data, function(k,v){
      a(v.param1, v.param2)
 });

Il ne fonctionnera pas comme prévu et va tout simplement faire:

a
a
b
b
c
c

au lieu de

a
b
c
a
b
c

source d'informationauteur Joey Hipolito

  1. 14

    Il y a plusieurs façons d'écrire ce genre de chose.

    Une approche flexible est séparé "actions" à partir de "séquence", permettant de :

    • fonctions a, b, c pour lancer une asynchrones (ajax), qui n'ont aucune connaissance de la façon dont ils doivent être séquencé
    • a, b, c pour être réutilisable, dans le cadre d'une ou de plusieurs séquences ou individuellement, selon les besoins.

    Voici un moyen de code de cette approche, à l'aide de .then() exclusivement pour l'enchaînement logique :

    function a() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('a').promise();//convert success to failure.
    }, function() {
        return 'a';//continue on failure path.
    });
}
function b() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('b').promise();//convert success to failure.
    }, function() {
        return 'b';//continue on failure path.
    });
}
function c() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('c').promise();//convert success to failure.
    }, function() {
        return 'c';//continue on failure path.
    });
}

a().then(b).then(c).then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

    Alternativement, si vous voulez avoir une seule fonction d'asynchrone, aappelé à partir de l'intérieur d'une boucle, puis le code pourrait être quelque chose comme ceci :

    function a(obj) {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject(obj.id).promise();//convert success to failure.
    }, function() {
        return obj.id;//continue on failure path.
    });
}

var data = [{id:'A', param1:1235, param2:3214},  {id:'B', param1:5432, param2:9876}];
//Note how IDs are included so these data objects can be identified later in failure cases.

var dfrd = $.Deferred();//starter Deferred for later resolution.
var p = dfrd.promise();//A promise derived from the starter Deferred, forming the basis of a .then() chain.

//Build a .then() chain by assignment
$.each(data, function(i, obj) {
    p = p.then( function() {
        return a(obj);
    });//By not including a fail handler here, failures will pass straight through to be handled by the terminal .then()'s fail handler.
});

//Chain a terminal .then(), with success and fail handlers.
p.then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

dfrd.resolve();//Resolve the starter Deferred to get things started.
  2. 5

    Vous pouvez enchaîner les appels asynchrones comme les appels ajax à l'aide de jQuery différée de l'objet et à l'aide de "et ensuite".

    Vous pouvez également modifier pour utiliser les fonctions qui retourne un différé promesse objet, au lieu d'un appel ajax que j'ai dans mon exemple.

    http://jsfiddle.net/q4cFv/

    (Exemple avec la fonction async: http://jsfiddle.net/q4cFv/1/)

    $(function() {
    var delay = 3,
        span = $('span'),
        posts = [
            {
                input1: 'My name 1',
                input2: 'My address 1',
                input3: 'My country 1'
            },
            {
                input1: 'My name 2',
                input2: 'My address 2',
                input3: 'My country 2'
            },
            {
                input1: 'My name 3',
                input2: 'My address 3',
                input3: 'My country 3'
            },
            {
                input1: 'My name 4',
                input2: 'My address 4',
                input3: 'My country 4'
            }
        ],
        looper = $.Deferred().resolve();

    $.each(posts, function(i, data) {
        looper = looper.then(function() {
            return $.ajax({
                data: {
                    json: JSON.stringify(data),
                    delay: delay
                },
                method: 'post',
                url: '/echo/json/',
                dataType: 'json'
            }).done(function(response) {
                span.append('Response:<br />');
                for(key in response) {
                    span.append(key + ': ' + response[key] + '<br />');
                }
                $('span').append('Waiting ' + delay + ' seconds<br /><br />');
            });
        });
    });
});
  3. 4

    Je vois que c ne dépendent pas de b résultat, et b ne dépendent pas de un résultat.

    À la suite de la SAISIR principes (http://en.wikipedia.org/wiki/GRASP_(objet oriented_design)un ne sais pas b et b ne sais pas c.

    Lorsque l'on programme, de se rappeler la portée des principes ou lignes directrices est très important.

    Une forte Cohésion et de Couplage Faible signifie que notre code sera mieux, plus réutilisable et facile à entretenir.

    La fonction principale qui sait unbet c doit construire l'enchaînement des appels.

    Les fonctions seraient les suivantes:

        function a(param1, param2) {

        var deferred = $.Deferred();

        console.log("    function a: begin. Params " + param1 + " and " + param2);

        mockPost("a_url").done(function() {
            console.log("    function a: end ok. Params " + param1 + " and " + param2);
            deferred.resolve();
        }).fail(function() {
            console.log("    function a: end fail. Params " + param1 + " and " + param2);
            deferred.reject();
        });

        return deferred.promise();
    }

    function b() {

        var deferred = $.Deferred();

        console.log("    function b: begin");

        mockPost("b_url").done(function() {
            console.log("    function b: end ok.");
            deferred.resolve();
        }).fail(function() {
            console.log("    function b: end fail.");
            deferred.reject();
        });

        return deferred.promise();
    }

    function c() {

        //We suppose that c function calls to post function and anything more
        return mockPost("c_url");
    }

    La fonction principale serait:

        //Array with params for a function (a function is the first link in chain)
    var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

    //Array with calls to each fixed sequence a, b, and c. We iterate over data array
    var arrayFunctions = [];
    $.each(data, function(i,obj) {
        arrayFunctions.push(
            function() {
                console.log("Params in data with index " + i + ":");

                //We define the fixed sequence: a with params, b without params and c without params 
                return $.iterativeWhen( 
                    function() {
                        return a(obj.param1, obj.param2);
                    },
                    b,
                    c
                );
            }
        )
    });

    //Start the global process
    $.iterativeWhen.apply($, arrayFunctions)
    .done(function() {
        console.log ("----------------");
        console.log ("> Global Success");       
    })
    .fail(function() {
        console.log ("--------------");
        console.log ("> Global Fail");
    });

    $.iterativeWhen n'existe pas en jQuery, j'ai donc construit. Il fonctionne avec jQuery 1.8 et versions ultérieures.

    $.iterativeWhen = function () {

    var deferred = $.Deferred();
    var promise = deferred.promise();

    $.each(arguments, function(i, obj) {

        promise = promise.then(function() {
            return obj();
        });
    });

    deferred.resolve();

    return promise;
};

    La mockPost une fonction qui simule un appel à $.post avec une probabilité de succès:

    function mockPost(url) {

        var deferred = $.Deferred();

        setTimeout(function() {
            if (Math.random() <= 0.9) {
                console.log("        request url: " + url +  "... ok");
                deferred.resolve();
            } else {
                console.log("        request url: " + url +  "... fail");
                deferred.reject();
            }
        }, 1000);

        return deferred.promise();
    }

    La sortie du journal est:

    Params in data with index 0: 
    function a: begin. Params 1235 and 3214 
        request url: a_url... ok 
    function a: end ok. Params 1235 and 3214 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
Params in data with index 1: 
    function a: begin. Params 5432 and 9876
        request url: a_url... ok
    function a: end ok. Params 5432 and 9876 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
---------------- 
> Global Success

    jsFiddle ici: http://jsfiddle.net/E2tp3/

  4. 3

    Votre problème est que vous êtes en appelle à tous les a s à la fois, mais vous voulez attendre pour le premier cycle avant de passer à la suivante. Vous souhaitez attendre que le précédent 'un' cycle se termine avant de commencer le cycle suivant.

    Supposons a,b,c accepter un rappel, et de la transmettre,

    une ressemblerait 

    function a(param1, param2,callback) {
     $.post(..., function(result){
         if(result){
            b(callback);
         } else {
            console.log("failed a");
         }
     })
}

    b irait comme:

    function b(callback) {
      $.post(..., function(result){
         if(result){
            c(callback);
         } else {
            console.log("failed b");
         }
     })
}

    Et c ressemblerait à:

    function c(callback) {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
         callback();
     })
}

    Cela nous permet de savoir quand un cycle est complet. Ce qui nous permet d'écrire:

    var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

var index = 0;
(function updateData(){
    a(data[index].param1,data[index].param2,function(){ //call a with the data
        index++;//update the index 
        updateData(); //start the next cycle
    });
});
  5. 2

    Ici est merveilleusement simple et très effet AJAX chaînage /file d'attente de plugin. Il exécutera vous ajax méthodes dans l'ordre les uns après les autres.

    Il fonctionne en acceptant un éventail de méthodes et de les mettre dans l'ordre. Il l'habitude d'exécuter la méthode suivante en attendant une réponse.

    //--- CETTE PARTIE EST DE VOTRE CODE -----------------------

    $(document).ready(function () {

    var AjaxQ = [];
AjaxQ[0] = function () { AjaxMethod1(); }
AjaxQ[1] = function () { AjaxMethod2(); }
AjaxQ[3] = function () { AjaxMethod3(); }

//Execute methods in sequence
$(document).sc_ExecuteAjaxQ({ fx: AjaxQ });

    });

    //--- CETTE PARTIE EST LE PLUGIN AJAX -------------------

    $.fn.sc_ExecuteAjaxQ = function (options) {

    //? Executes a series of AJAX methods in dequence

var options = $.extend({

    fx: [] //function1 () { }, function2 () { }, function3 () { }

}, options);

if (options.fx.length > 0) {

    var i = 0;

    $(this).unbind('ajaxComplete');
    $(this).ajaxComplete(function () {

        i++;
        if (i < options.fx.length && (typeof options.fx[i] == "function")) { options.fx[i](); }
        else { $(this).unbind('ajaxComplete'); }

    });

    //Execute first item in queue
    if (typeof options.fx[i] == "function") { options.fx[i](); }
    else { $(this).unbind('ajaxComplete'); }

}

    }