How to sequence a recursive callback in Javascript?

Question

I need to execute 3 ajax requests. I know that they happen to be asynchronous by default (And making them synchronous messes up the VM, so I don't want to go that way.) The way I do it is by calling a function three times passing variables.

result = '';
parse(var1);
parse(var2);
parse(var3);
view();

function parse(variable) {
    //ajax request here
    $.ajax({
        type: 'POST',
        url: 'script.php',
        data: {variable: variable},
        success: function (data) {
            //result stored in a global variable
            result += data;
        }
    });
}
function view() {
    //do something with result
}

But right now, the view() is triggered right away when the result isn't done cooking. How do I set them up to happen one after the other? I read about callbacks but they are very confusing since I don't have 3 distinct functions but just one taking different variables.

Look at Promises. They are a more maintainable way to do sequenced callbacks without needing to delve into callback hell. — zero298
– zero298, Commented Jun 16, 2016 at 22:19

Tdy · Accepted Answer · 2016-06-16 23:00:10Z

1

You could store your variables in an array and use a function to make your ajax call:

var variables = [var1, var2, var3];

function callParse() {
  if(variables.length) {
    var currentVar = variables.shift();
    parse(currentVar);
  }
  else {
    view();
  }
}

function parse(variable){
  //ajax request here
  $.ajax({
    type:"POST",
    url:'script.php',
    data:{variable:variable},
    success:function(data)
    {
      result+=data;
      callParse();
    }
  });
}

function view(){
//do something with result
}

edited Jun 16, 2016 at 23:00

answered Jun 16, 2016 at 22:23

Tdy

1,0931 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Billy Moon · Accepted Answer · 2016-06-16 22:19:30Z

0

Try chained promises - from: https://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/

$.when(
  // Get the HTML
  $.get("/feature/", function(html) {
    globalStore.html = html;
  }),

  // Get the CSS
  $.get("/assets/feature.css", function(css) {
    globalStore.css = css;
  }),

  // Get the JS
  $.getScript("/assets/feature.js")

).then(function() {

  // All is ready now, so...

  // Add CSS to page
  $("<style />").html(globalStore.css).appendTo("head");

  // Add HTML to page
  $("body").append(globalStore.html);

});

answered Jun 16, 2016 at 22:19

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

1 Comment

Ashtrix Over a year ago

Thanks Billy! I will go through Promises thoroughly. I am just learning JS and the callback is intimidating already. Thank you for the link again.

Vadim Kononov · Accepted Answer · 2016-06-16 22:33:07Z

0

You could try doing it this way:

parseAndView([var1, var2, var3]);

function parseAndView(vars, index) {
    index = index || 0; //initialize index if not passed

    //execute the AJAX call only if there are more variables to parse
    if (index < vars.length)
        //ajax request here
        $.ajax({
            type: "POST",
            url: 'script.php',
            data: {variable: vars[index]},
            success: function (data) {
                // result stored in a global variable
                result += data;
                // recursive call to parse another variable
                parseAndView(vars, index++);
            }
        });
    else
        view();
}

function view() {
  //do something with result
}

edited Jun 16, 2016 at 22:33

answered Jun 16, 2016 at 22:25

Vadim Kononov

2,2192 gold badges22 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to sequence a recursive callback in Javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related