AJAX＆＃34; loading＆＃34;动画不替换提交按钮

Question

我有一个动画div，它应该在单击按钮后替换提交按钮，并且动画应该持续到提交表单和获得响应的持续时间。然后应该再次替换动画，并替换另一个提交按钮。不幸的是，动画无法替换提交按钮，而是将另一个提交按钮抛入表单中。下面包含我的代码的相关部分：

var  error = false;
function buttonFunc (e){
var anim = $("#floatingCirclesG"), typedText = $("#new-comment textarea").val();
    e.preventDefault();

    if ($(that).val().split(" ").length > 3) {
        while(!loadingComment()) {
            $(anim).removeClass('hide-anim');
            $(this).replaceWith($(anim));
        }
    }

    else alert("comment too vague");

    // If comment was not posted, Bring back comment text
    if (error) {
        $('#new-comment textarea').val(typedText);
    }
}

function loadingComment () {
var typedText = $("#new-comment textarea").val(), submit = document.createElement('INPUT'), anim = $('#floatingCirclesG');
submit = $(submit).attr('value',"comment").attr("type", "submit");

if (typedText.split(" ").length > 3) {
if ($.post('make_new_comment.php', {new_comment: typedText, parent_post: thisPost}, function (e) {
    var update = document.createElement('DIV');
    update = $(e).load(update);
    $('#comments h3').html(parseInt($('#comments h3').html(), 10) + 1 + " Responses");
    $('#comments').append($(update));
    var lastId = $(update).attr("id");

    setTimeout(function() {
        window.location.href = window.location.href.indexOf("#") == -1 ? window.location.href + "#" + lastId: window.location.href.substring(0, window.location.href.indexOf("#")) + "#" + lastId;
        }, 2500);
    })) {

    // empty comment box if comment was successfully submitted and hide animation
    $('#new-comment textarea').val("");
    $(anim).replaceWith(submit).addClass("hide-anim");
    return true;
    }
    error = true;
return false;
}
else $("input[type='submit']", "#new-comment").attr('disabled', 'disabled');
  }

$("textarea").on("focus", function(){
var that = $(this), submitButton = $(that).parent().children("input[type='submit']");
submitButton.attr('disabled', 'disabled');
$(that).on('input', function() {
    if ($(that).val().split(" ").length > 3) {
        $(submitButton).removeAttr('disabled');
    }
});
submitButton.css("margin-top", 0).parent().get(0).delegate("input[type='submit']", "click", buttonFunc(e));
});

上面的整个片段与手头的问题并不完全相关，但我理解读者可能需要变量的来源。但是，关键在于这里

//The animation should only last for as long the form is not submitted and a response retrieved.
        while(!loadingComment()) {
            $(anim).removeClass('hide-anim');
            $(this).replaceWith($(anim));
        }