Controlar flujo de funciones en AJAX

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
задан 28.10.2016, 12:19
3 ответа

Как уже хорошо ты знаешь, ты можешь контролировать это с callbacks, который ты это перемещаешь в каждую функцию.

В следующем коде setTimeout это симулянт выполнения AJAX и(или) любой тип кода, который нуждался бы в Вашем времени:

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');});
2
ответ дан 24.11.2019, 12:52

Ты можешь делать это перемещая функции как параметры контролирующей функции и после перемещать функции, в которых ты нуждаешься для следующей функции также как параметры:

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);
2
ответ дан 24.11.2019, 12:52

У тебя есть несколько выборов, его, состоит в том, чтобы использовать propromises, но может становиться немного обманщиком.

оставил Тебе два выбора, одну с javascript сигара (vanilla) и другая, если ты думаешь использовать 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
ответ дан 24.11.2019, 12:52
  • 1
    #191; и этот отрицательный обет? и #191; По крайней мере тот, кто проголосовал за это негативно podr и # 237; чтобы давать explicaci и # 243; n? Я думаю, что мой ответ приспосабливается к вопросу. – Jordi Flores 28.10.2016, 12:29

Теги

Похожие вопросы