如何嵌套ajax调用？

Question

Here is my code.

Currently here every time inner ajax method will call when outer method mark as done.

var folderpath = encodeURIComponent('Recording' + new Date().getTime());
    var ajaxWorking = true;
    function uploadAudio(mp3Data) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var fd = new FormData();
            var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
            console.log("mp3name = " + mp3Name);
            fd.append('fname', mp3Name);
            fd.append('data', event.target.result);
            //Costin testing
            fd.append('studentId', '1');
            fd.append('folderpath', folderpath);
            fd.append('recording', stopRecording)

            $.ajax({
                type: 'POST',
                url: '/api/ClientApi/PostRecordedStream',
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data + " : AjaxDone");
                    ajaxWorking = false;
                }
            }).done(function (data) {
                console.log(data);
                //setTimeout(this, 5000);
                console.log(stopRecording + " : " + ajaxWorking);
                if (stopRecording == true && ajaxWorking == false) {
                    console.log(stopRecording + " : " + ajaxWorking + "LoadMP3");

                    $.ajax({
                        type: 'GET',
                        url: '/api/ClientApi/GetAudio',
                        data: { folderpath: folderpath },
                        success: function (data) {
                            console.log(data);
                        }
                    }).done(function (data) {
                        var url = 'data:audio/mp3;base64,' + data;
                        var li = document.createElement('li');
                        var au = document.createElement('audio');
                        var hf = document.createElement('a');
                        au.controls = true;
                        au.src = url;
                        hf.href = url;
                        hf.download = 'audio_recording_' + new Date().getTime() + '.mp3';
                        hf.innerHTML = hf.download;
                        li.appendChild(au);
                        li.appendChild(hf);
                        recordingslist.appendChild(li);
                    });
              }


            });
        };
        reader.readAsDataURL(mp3Data);
    }

Outer ajax will call multiple time from UI. But I want to call only when all outer ajax call are done.