Ajax Async False Freeze

Question

Current code

Updated I need the bellow to work with async false as on async true some uploads do not hit the server. The UI just needs to not freeze with async false. Or need a way I can control the que?

$("#goLive" ).click(function() {
        //This is fadein Spinner only apears at end of upload?
        $('.containerFixed').fadeIn();

        var subMit = "{{$client->website}}/api/key/{{$client->apikey}}/push";

        var i = 0;

        $.each(Data, function(key, value) {

            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                url: subMit,
                async : false,
                dataType: "json",
                data: JSON.stringify(Data[key]),
                success: function(){

                   i++;
                    console.log(i, Data.length);
                   if(i >= Data.length){

                       $('.containerFixed').fadeOut();
                   }
                },
                error: function(){
                    i++;
                    console.log(i, Data.length);
                    console.log('Connection Failed');

                    if(i >= Data.length){

                        $('.containerFixed').fadeOut();
                    }

                }

            });
        });

Answer 1

Here is a solution that will make the uploads one by one without using async: false while still using asynchronous i/o and not freezing the browser by using promises for synchronization.

You should definitely read mine and Felix's answer on How to return the response from an AJAX call first and make sure you understand the solution before using it.

It does not contain all the complicated logic you've had counting things manually and in fact relies on promises to take care of the concurrency for you. It will make the requests one by one.

Here it is:

$( '#goLive' ).click( function() {

    var subMit = "{{$client->website}}/api/key/{{$client->apikey}}/push";
    var i = 0;

    // The initial item in the queue of actions is the fadeIn action itself, when 
    // the fade in is done we start making requests, change to $.Deferred().resolve()
    // and move the fadeIn back up if you don't want to wait for it 
    var p =  $( '.containerFixed' ).fadeIn().promise(); 

    Data.forEach( function( el, i ) {   // for each item in the data chain
        p = p.then( function() {        // after the last action is done, make a new $.ajax
            return $.ajax( {
                type        : 'POST',
                contentType : 'application/json',
                url         : subMit,
                dataType    : 'json',
                data        : JSON.stringify( el )  // you probably don't need stringify here.
            } ).then( 
                function() {
                    console.log( 'done with ', i );     // log it
                }, 
                function() { 
                    return $.Deferred().resolve();      // suppress request failure
                } 
            );
        } );

        p.then( function() {                    // when all the actions are done
            $( '.containerFixed').fadeOut();    // when all done - fade out
        } );
    } );
} );

Answer 2

Try

$("#goLive" ).click(function() {
        //This is fadein Spinner only apears at end of upload?

        var subMit = "/echo/json/";

        var i = 0;
        var Data = new Array(100);
        $.each(Data, function(key, value) {

            $.ajax({
                beforeSend : function () {
                   $(".containerFixed").fadeIn("slow");
                },
                type: 'POST',
                contentType: 'application/json',
                url: subMit,
                async : true,
                dataType: "json",
                data: JSON.stringify(Data[key]),
                success: function(){

                   i++;
                    console.log(i, Data.length);
                   if(i >= Data.length){

                       $('.containerFixed')
                       .html("loading complete...")
                       .delay(1000)
                       .fadeOut("slow");

                   }
                },
                error: function(){
                    i++;
                    console.log(i, Data.length);
                    console.log('Connection Failed');

                    if(i >= Data.length){

                        $('.containerFixed').fadeOut();
                    }

                }

            });
        });
});

jsfiddle http://jsfiddle.net/guest271314/BwVzw/

Answer 3

From the jQuery #ajax documentation

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

While you have not explicitly stated why you need these requests to happen synchronously, and the code doesn't indicate a need for it, I'm going to first recommend removing the async: false option.

However, if you truly need these requests to be executed in order, here is a code sample that will do the trick without the use of the deprecated async: false option, and instead properly using the complete callback option:

var subMit = "{{$client->website}}/api/key/{{$client->apikey}}/push";
var requestData = [];
$.each(Data, function(key, value) {
    requestData.push(JSON.stringify(Data[key]));
});

$("#goLive" ).click(sendRequests);

function sendRequests() {
    $('.containerFixed').fadeIn();

    var i = 0;

    function complete() {
        i++;
        if (i >= requestData.length) {
            $('.containerFixed').fadeOut();
        } else {
            sendRequest(i, complete);
        }
    }

    sendRequest(i, complete);
}

function sendRequest(i, complete) {
    $.ajas({
        type: 'POST',
        contentType: 'application/json',
        url: subMit,
        dataType: "json",
        data: requestData[i],
        error: function(){
            console.log('Connection Failed');
        },
        complete: complete
    });
}

I have removed the async: false option and instead manually implemented the behavior you are looking for. For brevity, I removed some of the logging statements that I assume were non-essential. I also assumed that Data is a static map and therefore requestData is safe to reference asynchronously. Of course, you could choose to create the requestData inside of the sendRequests function to protect yourself, as well as scope these functions differently should you have more case-particular needs.

Answer 4

Guess $('.containerFixed').fadeIn(); is async, it will gradually show during a set of time using timeouts or interval (not sure about how it is implemented). Then you sync ajax POST blocks and it only "fade in" after the post is complete.

Any work that is done you should do in the success and/or error callbacks and let in be an async post.