$ .ajax奇怪的订单呼叫

First i apologize for my future half-level in english.

I came to you cause i have a weird issue with my javascript.

Here you can see that i have this code :

addVoucherMaster: function (Code) {
    var btns = $('.btn-spin');
    btns.empty();
    if (btns.find('i.fa-spinner').length == 0) {
        $('<i>', { 'class': 'fa fa-spinner fa-pulse' }).appendTo(btns);
    }
    btns.css('opacity', '.5');
    $(".validation-summary-errors").attr('class', 'validation-summary-valid');
    $(".validation-summary-valid").children('ul').empty();

    var dataSend = {
        voucherId: Code,
    };
    var jsonData = JSON.stringify(dataSend);

    var result = null;
    if (Code && this.addVoucherUrl) {
        $.ajax({
            url: this.addVoucherUrl,
            type: 'POST',
            data: jsonData,
            dataType: 'json',
            processData: false,
            contentType: 'application/json; charset=utf-8',
            async: false,
            success: function (data) {
                result = data.Data;
                return data;
            }
        });
        if (result == 'True') {
            this.payments();
        } else {
            var btns = $('.btn-spin');
            this.errorVoucher("Incorrect voucher");
            btns.css('opacity', 1);
            btns.empty();
            btns.append('+');
        }
    }
},

This is really bad written, but first i replace the "+" in a button with a spinner ( loader ), then i make an ajax query (async) and reexecute some code after. (all of this is executed by a data-bind="click:addVoucherMaster")

Issues start here. When i use the Chrome debugger with breakpoints, after the 'btns.css('opacity', '.5');', my button is like i want, then the responses make me wait for 1/2 seconds, and my button stop to spin at the end.

But, without debugger, the 1/2 seconds appears before my buttons start spinning. ( so it starts and stop at the same time, we don't see anything ).

Is anyone able to help me ??

Thank you in advance,

David,

Change the Ajax request to this:

$.ajax({
    url: this.addVoucherUrl,
    type: 'POST',
    data: jsonData,
    dataType: 'json',
    processData: false,
    contentType: 'application/json; charset=utf-8',
    async: false,
    success: function (data) {
        result = data.Data;

        if (result == 'True') {
            this.payments();
        } else {
            var btns = $('.btn-spin');
            this.errorVoucher("Incorrect voucher");
            btns.css('opacity', 1);
            btns.empty();
            btns.append('+');
        }
    }
});

The if / else structure you had was probably executed while the ajax request was still busy.

Problem solved ! sorry for the incovenience, and thank you for your help. I've replaced async: false by async: true, and execute the next code in a request.done()... the 'async: false' freeze all the web page, and don't allow anything to move or any button to be clicked on, waiting for the server response. in fact the button was spinning, but we were not able to see him do that.

Thank you again :)