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调用非常及时，因此我想在执行时显示一个“ spinner”。好像我的

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

代码行被完全忽略。

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

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

为什么我的代码看起来好像removeClass都没有？

Answer 1

似乎没有删除该类，但实际上您是在删除该类，然后立即将其重新添加到元素中。

在尝试中，您拥有

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

，最后将始终在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（）;

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

2 个答案: