5

Tengo varias funciones AJAX y lo que quiero es tener una función que controle que cuando termine una, ejecute otra. Este es el esquema.

function ajax1(){}
function ajax2(){}
function ajax3(){}

//solo cuando termine ajax1 ejecutar ajax2 y así sucesivamente
function controladora1(){
    ajax1();
    ajax2();
    ajax3();
}

function controladora2(){
    ajax3();
    ajax2();
    ajax1();
}

Sé que se tiene que hacer con callbacks pero no me termino de aclarar.

4
  • Lo que hay que hacer es dar mas datos. Que son mas datos? Saber si se repiten las mismas funciones o las funciones son dinámicas. Eso de salida. Si son estáticas, en el ajax de la función ajax1, en el complete llamas a la función 2, y en el ajax2, en el complete de la llamada ajax, a la función 3
    – Mikel
    el 28 oct. 2016 a las 9:30
  • Relacionada: ¿Cómo realizar una llamada AJAX sin bibliotecas?
    – Mariano
    el 28 oct. 2016 a las 9:31
  • @Mikel Tienes razón quizás debería de haberme explicado un poco mejor, no me valen las funciones AJAX anidadas porque quiero tener el control de cada una independientemente. Fíjate que tengo controladora1 y controladora2 que ejecutan en orden distinto. Editaría la pregunta pero no se si es por novato o porque no me entero pero no veo donde está el botón de editar.
    – Takyo
    el 28 oct. 2016 a las 9:46
  • Si tienes alguna librería que use promises como jquery deberías usar esta y no callbacks. Estos son viables cuando no tienes lo anterior o no quieres usar una librería. De lo contrario terminaras con un callback hell
    – devconcept
    el 28 oct. 2016 a las 17:51

3 respuestas 3

2

Como ya bien sabes, lo puedes controlar eso con callbacks, cuál lo pasas a cada función.

En el siguiente código el setTimeout es el simulador de ejecución de AJAX y/o cualquier tipo de código que necesite su tiempo:

function ajax1(callback) {

    console.log('ajax 1');
    setTimeout(function(){ callback(); },1000);  
}

function ajax2(callback) {

    console.log('ajax 2');
    setTimeout(function(){ callback(); },1500);
}

function ajax3(callback) {

    console.log('ajax 3');  
    setTimeout(function(){ callback(); },2000);
}

function controladora1(callback) {
  
    ajax1(function() {
        ajax2(function() {
            ajax3(callback);
        });
    });
}

controladora1(function(){console.log('...y listo');});

0
2

Lo puedes hacer pasando las funciones como parámetros de la función controladora y después ir pasando las funciones que necesites para la siguiente función también como parámetros:

function controladora(ajax1, ajax2, ajax3) {
    //Aquí las funciones que necesites
    ajax1(ajax2, ajax3);
}

function ajax1(ajax2, ajax3) {
    alert("ajax1");
    ajax2(ajax3);
}

function ajax2(ajax3) {
    alert("ajax2");
    ajax3();
}

function ajax3() {
    alert("ajax3");
}
    
controladora(ajax1, ajax2, ajax3);

1

Tienes varias opciones, lo suyo, es usar propromises, pero puede llegar a ser un poco lioso.

Te dejo dos opciones, una con javascript puro (vanilla) y otra si piensas utilizar jQuery

Vanilla js

function xmlReq(url, retCallback, errCallback){
  var xmlhttp = new XMLHttpRequest();  
  xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
               //llamar a ajax 2
               retCallback();
           }
           else {
             errCallback(xmlhttp)
             }
        }
    };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

var url1 = "https://httpbin.org/get";
var url2 = "https://httpbin.org/get?x=v";
var url3 = "https://jsonplaceholder.typicode.com/posts/1";

function llamar1() {
  console.log(" fin 1");
  xmlReq(url1, llamar2, errorHandler);
}
function llamar2() {
  console.log(" fin 2");
  xmlReq(url2, llamar3, errorHandler);
}
function llamar3(){
  xmlReq(url3, function() {console.log("fin 3")  }, errorHandler);
}
function errorHandler(xmlObj) {
  console.log("ha ocurrido un error " + xmlObj.status)
}

llamar1();

jQuery

var url1 = "https://httpbin.org/get";
var url2 = "https://httpbin.org/get?x=v";
var url3 = "https://jsonplaceholder.typicode.com/posts/1";

$.ajax({url: url1, success: function(result){
  console.log("ok 1");
   $.ajax({url: url2, success: function(result){
        console.log("ok 2");
        $.ajax({url: url3, success: function(result){
          console.log("ok 3");
        
        }});
   }});        
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • ¿y este voto negativo? ¿Al menos el que lo haya votado negativamente podría dar una explicación? Creo que mi respuesta se ajusta a la pregunta. el 28 oct. 2016 a las 9:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.