Nested Ajax Want to Running in Sequence

Question

My code is as follows

$.ajax({
    type: 'post',
    dataType: 'json',
    url: '123.123.0.1',
    success: function (result) {
        for (var i = 0; i < 2; i++) {
            console.log('OUTSIDE');
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '123.123.0.1',
                success: function (result) {
                    console.log('INSIDE');
                }
            });
        }
    }
});

Result of that code is :

OUTSIDE
OUTSIDE
INSIDE
INSIDE

My Objective here is I want to outside AJAX wait inside AJAX until inside AJAX done then inside AJAX continue. So I wanna the result look like :

OUTSIDE
INSIDE
OUTSIDE
INSIDE

My question :

How to do that? How to fix my code?

Simple, move `console.log('OUTSIDE');` to the line above `console.log('INSIDE');` — George, Apr 11 '17 at 07:35
So you want to turn asynchronous code synchronous. Hardly ever a good practice IMO. — George, Apr 11 '17 at 07:38
This is the nature of ajax calls they are async and they should work like this, if you want a queue requests try this answer http://stackoverflow.com/a/3035268/5452965 — codtex, Apr 11 '17 at 07:39
Can you give example with my case ? if your example ok i will accept as the answer — Mr. Mike, Apr 11 '17 at 07:45

Vladu Ionut · Answer 1 · 2017-04-11T07:45:49.197

You have to wait the ajax request to be finished before you go to the next step. Below an recursive example.

// Code goes here

$.ajax({
  type: 'post',
  dataType: 'json',
  url: '123.123.0.1',
  success: function(result) {

    function processResult() {
      if (i >= 2) return;

      console.log('OUTSIDE');

      $.ajax({
        type: 'post',
        dataType: 'json',
        url: '123.123.0.1',
        success: function(result) {
          console.log('INSIDE');
        }
      }).then(function() {
        processResult(++i);
      });
    }
    processResult(0);
  }
});

Nested Ajax Want to Running in Sequence

1 Answers1