Предотвращение состояния гонки в асинхронном вызове Ajax

Question

Я использую Javascript ниже, чтобы перетащить контент в Bootstrap -4 поповер, и я думаю, что у него есть условие гонки:

$(function () {
    $('[data-toggle="popover"]').popover({
        html: true
    ,   content: function () {
            // Pull URL from data-remote-ref of the element that triggered the popover
            var url = $(this).data('remote-ref');
            // Make a temporary element ID for the spinner
            var spinnerId = "loading-id-" + $.now();
            // Initiate an asynchronous Ajax call
            $.get(url, function (data) {
                $('#'+spinnerId).html(data);
            });
            // Return temporary content with the spinner
            return '<div id="' + spinnerId + '">'
                 +     '<div class="spinner-border" role="status">'
                 +         '<span class="sr-only">Loading...</span>'
                 +     '</div>'
                 + '</div>';
        }
    });
});

Этот код запускает Ajax $.get request, а затем возвращает <div id="loading-id-..."> для обработки.

На данный момент $('#loading-id-...') еще не существует, поэтому браузер начинает работу по добавлению его на страницу.

Если Ajax обратный вызов происходит до того, как браузер завершил создание счетчика, $('#loading-id-...') внутри function (data) ничего не даст, поэтому удаленный контент никогда не будет обработан.

Если предположить, что мои предположения верны, и в браузер не встроено специальное «magi c», чтобы предотвратить такие условия гонки, есть ли способ исправить это состояние гонки?