Control function flow in AJAX

Question

Control function flow in AJAX

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)

4

I have several AJAX functions and what I want is to have a function that controls that when one is finished, execute another one. This is the scheme.

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();
}

I know it has to be done with callbacks but I have not finished clarifying.

javascript ajax callback

asked by Takyo 28.10.2016 в 10:53

source

3 answers

2

You can do it by passing the functions as parameters of the controller function and then passing the functions you need for the following function as parameters:

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);

answered by 28.10.2016 в 11:24

0

You have several options, your thing, is to use propromises , but it can be a bit messy.

I leave you two options, one with pure javascript (vanilla) and another if you plan to use 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>

answered by 28.10.2016 в 11:25

How to obtain the name of the operating system used by the client with ASP.Net MVC 4.5? How to apply a function to an array

score 2 · Accepted Answer

As you well know, you can control that with callbacks , which you pass to each function.

In the following code the setTimeout is the AJAX execution simulator and / or any type of code that needs its time:

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');});