Executing one function after another

Question

All of these functions are in the main function which is called after jQuery async AJAX success event and it runs every second. Each of the three functions call specific functions within them as well.

This is the basic javascript code I have:

function mainFunction() {
    function selectView(){
       // do stuff
    }
    function startWidgets(){
       // do stuff
    }
    function popData(){
       // do stuff
    }
    $.when(selectView()).then(startWidgets).then(popData);
}

function ajaxCall(){
    ajaxRequest = $.ajax({
        type: "GET",
        url: "",
        data: {},
        async: true,
        cache: false,
        timeout:50000,

        success: function(data){
            mainFunction();
            setTimeout(
                ajaxCall, 5000
            );
        },
        error: function() {
            // error stuff
        },
        complete: function() {
            // complete stuff
        }
    });
}

selectView() - Uses jQuery .load() method to load HTML structure based on specific AJAX data.

startWidgets() - Initializes widgets by placing them into the HTML structure (based on IDs and classes). Only runs the first time.

popData() - Populates data to all other widgets based on AJAX data.

I tried $.when(selectView()).then(startWidgets).then(popData);

But that did not work. My problem is startWidgets usually runs before selectView, but since there's no HTML markup yet, it fails. I need them to run in that specific order and one doesn't start till previous one is done.

score 1 · Answer 1 · answered Sep 26 '13 at 16:19

1

You need to return the promise objects from selectView, if you are not returning a promise from selectView then when will consider the object as resolved and execute the success handlers.

Also I think it is best to handle the callbacks using .done()

function mainFunction() {
    function selectView(){
       // do stuff
       var xhr = $.ajax(....);
       ....
       return xhr;
    }
    function startWidgets(){
       // do stuff
    }
    function popData(){
       // do stuff
    }
    $.when(selectView()).done(startWidgets).done(popData);
}

answered Sep 26 '13 at 16:19

Arun P Johny

384,651
66
527
531

I edited my code and added code to show how my AJAX request is done because it's not done in selectView function as you have it. Does that make sense? – zen Sep 26 '13 at 16:28
@zen then you have a problem... you need to return `ajaxRequest` from `ajaxCall` and that value must be returned from `selectView`.... if you can share those methods we can have a better look – Arun P Johny Sep 26 '13 at 16:29
Any way to run those 3 functions in a sequential order without changing the AJAX code? It doesn't have to use `.when()` and `.then()` or `.done()` if there's a better solution for it. – zen Sep 26 '13 at 16:37
@zen no because then there is no way to know when the ajax request is finished – Arun P Johny Sep 26 '13 at 16:39
Is there a way to chain the functions inside the AJAX call? I guess what I mean is the `mainFunction()` is not executed until AJAX is successful, so when it is executed, all I need is to run those 3 functions in order. They wouldn't run before AJAX is successful anyways. – zen Sep 26 '13 at 19:03
@zen that can be done, just add `ajaxRequest.done(mainFunction)` at the end of `ajaxCall` – Arun P Johny Sep 26 '13 at 23:40
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38136/discussion-between-zen-and-arun-p-johny) – zen Sep 27 '13 at 02:37

score 1 · Answer 2 · answered Sep 11 '14 at 14:21

I haven't tested it, but something like that might helps you ;)

selectView_done = false;
startWidgets_done = false;

function selectView() {
  // do stuff
  selectView_done = true;
  return ...;
}

function startWidgets() {
  // do stuff
  startWidgets_done = true;
}

function popData() {
  // do stuff
}

function control_selectView(){
  if( selectView_done ){
    startWidgets();
    control_popData();
  }
  else setTimeout(function(){ control_selectView() }, 100);
}

function control_popData(){
  if( startWidgets_done ) popData();
  else setTimeout(function(){ control_popData() }, 100);
}

selectView();
control_selectView();

Executing one function after another

2 Answers2

Linked