Ajax异步错误冻结

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

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.