在异步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请求，然后返回<div id="loading-id-...">进行渲染。

此时，$('#loading-id-...')尚不存在，因此浏览器开始将其添加到页面上。

如果Ajax回调发生在浏览器完成构建微调器之前，则$('#loading-id-...')中的function (data)将不会产生任何结果，因此远程内容将永远不会呈现。

假设我的假设是正确的，并且浏览器中没有内置特殊的“魔术”来防止此类竞争状况，是否有办法解决这种竞争状况？