I have several AJAX functions and what I want is to have a function that controls that when one finishes, it executes another. This is the schematic.
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 that it has to be done with callbacks but I'm still not clear.
You can do this by passing the functions as parameters to the controller function and then passing the functions you need to the next function as parameters as well:
As you already 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 your time:You have several options, his thing is to use
propromises
, but it can be a bit confusing.I leave you two options, one with pure javascript (vanilla) and another if you plan to use jQuery