jquery - Recursive function in javascript and ajax -

i'm trying little web in javascript + ajax , want recursively. i've never used ajax before , problem don't know finish functions. code looks that:

var cont = 0; var function1 = function (query) {     $.ajax({         url: '...',         data: {                 .                 .                 .         },         success: function (response) {             instructions;             function2(param1, param2);         }     }); }; var function2 = function (query, param2) {     $.ajax({         url: '...',         data: {                 .                 .                 .         },         success: function (response) {             instructions;             function3(param1, param2, param3);         }     }); }; var function3 = function (query, param2, param3) {     if (cont == 2) {         console.log("finish");         return;     }     var test = $.ajax({         url: '...',         data: {                 .                 .                 .         },         success: function (response) {             if (...) {                 cont++;                 instructions;                 var audio = new audio(...);                 audio.play();                 audio.onended = function () {                     instructions;                     function3(query, param2, param3);                     return;                 };             } else {                 instructions;                 function3(query, param2, param3);             };             return;         }     });     return; }; document.getelementbyid('search-form').addeventlistener('submit', function (e) {     e.preventdefault();     function1(document.getelementbyid('query').value); }, false); 

so basically, when cont == 2i try out of javascript function3 return; part of program ( don't know if success: function (response) or full javascript function3 ) still running , instructions being executed.

how solve this?

first off, way make use of jquery's deferred objects.

as have noticed, program doesn't wait @ ajax request, , proceed 'success' handler. because javascript uses non-blocking/waiting model. call $.ajax({params,...}), sends request, whatever's after run, without waiting. then, once top level function has finished executing , nothing else running, response can processed, , 'success' handler invoked.

so how stuff properly? start arranging request functions this:

function dorequest1() {     return $.ajax({         url: '...',         data: {                 .                 .                 .         }     }); }  function dorequest2(parameter) {     return $.ajax({         url: '...',         data: {                 .                 p: parameter                 .         }     }); } 

notice aren't providing success handler, returning value $.ajax returns. deferred object used represent request has been sent, response hasn't been received/handled. can attach handler object this:

var r1 = dorequest1();  r1.then(function() {     // stuff on success... }); 

a nice thing these objects can chained using 'then'. 'then' accepts function takes value of old request , produces new request next:

var allrequests = dorequest1().then(function(result1) {     return dorequest2("hello"); }); 

the 'allrequests' variable deferred object representing result of dorequest2. how result? use 'then()', other deferred:

allrequests.then(function(result) {     alert("all requests completed. result of last one: " + result); }); 

make sure understand how result 1 request can used set parameters next one, or decide request make next.

if don't need 1 request's result determine next, rather, want run number of requests , wait them complete, can use shortcut, 'when':

$.when(dorequest1(),dorequest2(), dorequest3()).then(function(result1,result2,result3) {     // done }); 

another nice thing deferreds can cancelled:

allrequests.abort(); 

using above, can see how restructure code sequence of requests function run after 3 have completed.