$ .ajax奇怪的订单呼叫

Question

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,

Answer 1

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.