嵌套 AJAX 跳过父 function，不会停止服务器响应

Question

I've been making a javascript function and it's getting out of my hands.

The code is this:

$(document).on('click', '.submit', function(event) {
    event.preventDefault();
    if ($('.houdini').attr('is') == "magic") {
        var multimediaData = 0;
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });  
        $.ajax({
            url: '/checkhoudini',
            type: 'POST',
            data: $('.houdini').val(),
            cache: false,
            contentType: false,
            processData: false,
        }).done(function(data) {
            if ($(data).has(data.error)) {
                console.log(data.error);
                return; // <--- THIS IS SUPOSSED TO STOP THE WHOLE PARENT FUNCTION
            } else if ($(data).has(data.success)) {
                console.log('yo check');
                multimediaData == data.success;
                return true; // <--- THIS IS SUPOSSED TO RESUME THE PARENT FUNCTION AS IT IS TRUE
            }
        }).fail(function() {
            console.log('gl next time');
        });
    } else {
        console.log('all went down');
    }
    console.log(multimediaData);
    content = multimediaData // <--- THIS FILLS THE CONTENT VARIABLE WITH THE DATA FROM THE SERVER
    console.log(content);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });   
    $.ajax({
        url: '/okletsdothis',
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            body: content,
            rabbit: $('.rabbit').val(),
        },
    })
    .done(function(data) {
        console.log(data);
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
});

My problem is that, when doing the first AJAX Call (the nested one inside the if statement), the request is sent to the server, but the parent code doesn't wait for the response, and keeps going . After the server responds, its too late, I get the response from the server but the whole parent script is done.

Result:

As you can see, JS skips the whole thing, giving undefined to the logs and jumping like parkour.

From lines 146 to 120 to 163 and the code ends there at line 170.

What can I do in my first ajax call so javascript waits for it to receive a response and then keep executing the parent function?

Thank you everyone in advance, have a nice day:)

Answer 1

I transferred your snippet into the following one and carried out a few changes:

• the "parent script" parts are now in the .done() callback for your first .ajax() call.

• I also replaced your backend server address by one that is globally available for testing.

Now everything should work as intended.

 $(document).on('click', '.submit', function(event) { event.preventDefault(); if ($('.houdini').attr('is') == "magic") { var multimediaData = 0; $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ url: "https://jsonplaceholder.typicode.com/posts", // changed type: 'POST', data: JSON.stringify({success:"my server response"}), // changed cache: false, contentType: false, processData: false, headers: {'Content-type': 'application/json; charset=UTF-8'}// changed }).done(function(data) { console.log("Ajax: "+data.success); if (data.error) { console.log(data.error); return; // <--- THIS IS SUPOSSED TO STOP THE WHOLE PARENT FUNCTION } else if (data.success) { // changed console.log('yo check'); multimediaData == data.success; console.log("here we go..."); // $.ajaxSetup({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} }); $.ajax({ url: 'https://jsonplaceholder.typicode.com/users', type: 'POST', data: JSON.stringify({_token: "some obscure token", body: content, rabbit: "Peter Rabbit" }), // changed headers: {'Content-type': 'application/json; charset=UTF-8'}// changed }).done(function(data) { console.log(data); console.log("success"); }).fail(function() { console.log("error"); }).always(function() { console.log("complete"); }); return true; // <--- THIS IS SUPOSSED TO RESUME THE PARENT FUNCTION AS IT IS TRUE } }).fail(function() { console.log('gl next time'); }); } else { console.log('all went down'); } console.log("This will always be 0:"+ multimediaData); content = multimediaData // <--- THIS FILLS THE CONTENT VARIABLE WITH THE DATA FROM THE SERVER console.log("and so will this: "+content); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="houdini" is="magic"></div> <button class="submit">go</button>