Как добавить Индикатор загрузки (Loading) в AJAX?

Question

[Maxla93]

Необходимо добавить индикатор загрузки, чтобы он выполнялся до тех пор пока в tradenumber не появится значение, которое берется с логов json - node.js, после должен выполнялся success.

$(function() {	
    $("#sendTradeOfferForPay").on('click', function(){
        var str;
        var items = [];
		
        if(!items.length) return false;
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
		$.ajax({
                    url: "/api/pay", type: 'POST', dataType: 'json',
                    data: {items: items, total: $("#info_bal").text(), steamid: $("#itemsContainer").data('steamid'), token: $("#itemsContainer").data('token'),  },
                    // ИНДИКАТОР ЗАГРУЗКИ - должен быть до тех пор, пока не появилось значение "TRADENUMBER", далее сразу success
					beforeSend: function(){
						$('#my_inventory').html('<div id="timevalue" class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div><br></div><br>Create trade, please wait...');
						},
					// Должен вызываться тогда, когда в "TRADENUMBER" появиться значение, которое также добавляется в class="tradeOfferResponse"
					success: function(data) {
					$("#itemsContainer").find(".modalText").html('<span style="font-size: 18px;" class="tradeOfferResponse"><a href="#">>>> SEND SKINS <<<</a></span>');
					}
        });
    });

var socket = io(document.domain + ':2095');
socket.on('trade_created', function(data){
    var trade = JSON.parse(data); // Парсинг логов node.js, поиск trade->tradeid массив
	var tradenumber = trade.tradeid; // TRADENUMBER
    $(".tradeOfferResponse").show().find('a').prop("href", "https://steamcommunity.com/tradeoffer/"+ tradenumber +"/");
});

Answer 1

[Евгений]

А зачем вы используете AJAX если у вас в проекте есть сокеты?
По делу: вы добавляете лоадер после отправки AJAX, когда данные будут получены через сокет просто что-то делайте с лоадером (удаляйте, вешайте класс)

socket.on('trade_created', function(data){
    var trade = JSON.parse(data);
    var tradenumber = trade.tradeid;

    if (tradenumber) {
        $('#timevalue').addClass('invisible');
        $(".tradeOfferResponse").show().find('a').prop("href", "https://steamcommunity.com/tradeoffer/"+ tradenumber +"/");
    }
});