javascript - JQuery wait for any function to finish before starting another- ajax, animations and Audio -

i have several lines in code need run in right order. these lines include:

ajax calls, animations, , playing audio

i aware of these questions: call function after previous function complete

wait until jquery ajax requests done?

how make jquery wait ajax call finish before returns?

i need way can add function definition function completed first before other action done. major problem function1.done(function2) or callback structure, because have many of these, want control sequence of execution of these lines order in code. there way that?

    $.get(lang1_txt_path, function(data) {     src_txt = data; }, 'text').done(function() {     $.get(lang2_txt_path, function(data) {         trg_txt = data;     }, 'text').done(function() {         $.get(lang2_os_txt_path, function(data) {             trg_txt_os = data;         }, 'text').done(function() { //something      })     }) }); 

and these animations:

        $("#success_div").delay(1000).show(1000);     $("#success_div").delay(500).hide(500);     $("#success_div").fadeout('slow', function() {         //something else      }); 

and audio:

function play_audio(audio_path,audio_type){ audio = document.getelementbyid("audio_"+audio_type);audio.src =audio_path;audio.play(); 

}

play_audio(audio_path1,'general')   played_2nd_file=false; $("#audio_player").bind("ended", function(){         if (played_2nd_file==false){             audio_path2="audio/"+lang2+'.'+trg_audio2             play_audio(audio_path2,'general')             console.log(audio_path2)             played_2nd_file=true;              }       }); 

so, can see, hassle make each of these wait till previous ones completed. maybe there can programming practices regarding how organize them , include callbacks, complicated, given code changing fast, way make sure functions implemented in same order within code, included in definition of each function. ideally want like:

ajax_load_file(file_path1) ajax_load_file(file_path2) ajax_load_file(file_path3) play_success_animation() play_success_audio() play_transition_audio() play_transition animation() 

thank much!

most ajax operations return promise, can return those:

function ajax_load_file(file){     return $.ajax(...); } 

animations provide promise on queue,

function play_success_animation() {     $("#success_div").delay(1000).show(1000);     $("#success_div").delay(500).hide(500);     $("#success_div").fadeout('slow', function() {         //something else      });     return $("#success_div").promise(); } 

audio provide end event, need connect/disconnect required, use on , off:

function play_transition_audio(path, type){     var def = $.deferred();     play_audio(path,type);     $("#audio_player").off("ended").on("ended", function(){        def.resolve(path);     });     return def.promise(); } 

then chain either sequentially then or done (then allows success , fail callbacks, done provide success), or in parallel when:

e.g. sequential:

   ajax_load_file(file_1).done(play_success_animation)        .then(function(){            return play_transition_audio("audio_path1", "general");        }); 

you can either specify function name, if takes no params , returns promise, or use anonymous function in done/then.

e.g. parallel:

   $.when(ajax_load_file(file_1), play_success_animation(), play_transition_audio("audio_path1", "general"));