Скрипт не будет отображать скрытый элемент при удалении скрытого класса

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 ивручную удалите класс hidden в инструментах Chrome dev, счетчик покажет, где именно я хочу.

Я добавил setTimeout(function() {}, 100); в тщетной надежде, что удаление класса hidden может занять некоторое время, и я хотел избежать вызова SubmitForm, выполняющегося до того, как счетчик станет видимым.

Почему мой код ведет себя так, как будто removeClass даже нет?

Answer 1

вместо удаления класса, возможно, вам следует попробовать изменить атрибут «display» счетчика с «none» на «block»

2 способа сделать это следующим образом:

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

или

$ ( '# uploadSpinner') шоу ();.

Answer 2

Может показаться, что класс не удален, но в действительности вы удаляете класс, а затем мгновенно добавляете его обратно в элемент.

В вашей попытке поймать у вас есть

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

и, наконец, всегда будет работать сразу после того, как закончится ваш блок попытки.

Как указано в MDN:

finally_statements:

Операторы, которые выполняются после выполнения оператора try. Эти операторы выполняются независимо от того, было ли исключение выброшено или перехвачено.

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

Итак, ваш код запускает блок try, который удаляет класс, но затем просто мгновенно добавляет его обратно в ваш блок finally. Это происходит потому, что setTimeout и я предполагаю, что ваша SubmitForm функция асинхронна.

Вам потребуется вернуть обратный вызов или Promise из функции SubmitForm, чтобы вы могли затем удалить загрузчик после завершения отправки формы.

Вы сможете исправить это, изменив свою функцию на

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);
}