删除“隐藏”类时脚本不会显示隐藏元素

Question

我有以下功能：

function submitForCorrection() {
    try {
        $("#uploadSpinner").removeClass("hidden");
        setTimeout(function() {}, 100);
        SubmitForm('BoqReviewForm',
            'boqReviewTable',
            '@Url.Action("PostBoqFlags", "ProjectAuthority")',
            '@Url.Action("GetBoqReview", "ProjectAuthority")',
            function() { showNotification('Correction requested.', 'success'); },
            null,
            'Requesting correction. Please wait',
            false);
    } finally {
        $("#uploadSpinner").addClass("hidden");
    }
}

SubmitForm 调用相当耗时，因此我想在它执行时显示一个“微调器”。然而，就好像我的

$("#uploadSpinner").removeClass("hidden");

这行代码完全被忽略了。

我知道微调器在正确的位置，因为如果我在 removeClass 行上放置一个断点并在 Chrome 开发工具中手动删除 hidden 类，微调器会准确显示在我想要的位置。

我徒劳地添加了setTimeout(function() {}, 100);，希望删除hidden 类可能需要一些时间，并且我想避免在微调器可见之前执行SubmitForm 调用。

为什么我的代码表现得好像 removeClass 不存在？

Answer 1

看起来该类没有被删除，但实际上您正在删除该类，然后立即将其添加回元素。

在你的尝试中你有

} finally {
  $("#uploadSpinner").addClass("hidden");
}

finally 总是会在你的 try 块完成后立即运行。

如 MDN 所述：

finally_statements：

在 try 语句完成后执行的语句。无论是否抛出或捕获异常，这些语句都会执行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

因此，您的代码正在运行 try 块，该块将删除该类，但它只是立即将其添加回您的 finally 块中。发生这种情况是因为 setTimeout 和我假设您的 SubmitForm 函数都是异步的。

您需要从您的SubmitForm 函数返回一个回调或Promise，以便在表单完成提交后移除加载程序。

您应该能够通过将您的功能更改为此来解决此问题

function submitForCorrection() {        
  $("#uploadSpinner").removeClass("hidden");
  setTimeout(function() {
    SubmitForm('BoqReviewForm',
      'boqReviewTable',
      '@Url.Action("PostBoqFlags", "ProjectAuthority")',
      '@Url.Action("GetBoqReview", "ProjectAuthority")',
      function() {
        showNotification('Correction requested.', 'success');
        $("#uploadSpinner").addClass("hidden");
      },
      null,
      'Requesting correction. Please wait',
      false
    );
  }, 100);
}

Answer 2

与其删除类，或许您应该尝试将微调器的“显示”属性从“无”更改为“块”

两种方法如下：

$("#uploadSpinner").css("display", "block");

或

$('#uploadSpinner').show();