Синхронизация изменений стиля во время выполнения функции JavaScript

Question

Я пытаюсь указать прогрессирование функции, в то время как длительное выполнение функции приводит к тому, что страница перестает отвечать на запросы.Моя первая попытка состояла в том, чтобы просто начать и завершить свою функцию с помощью команд таблицы стилей, например, так:

function myFunc() {
  document.body.style.cursor = "progress";
  // main guts //
  document.body.style.cursor = "default";
}

Это привело к тому, что у курсора «progress», по-видимому, не было возможности проявить себя до того, как отняли много времени «потроха»более, заканчивая курсором назад по умолчанию.Мне кажется, это проблема синхронизации или синхронизации, потому что

function myFunc() {
  document.body.style.cursor = "progress";
  if(document.body.style.cursor == "progress") {
    // main guts //
  }
  document.body.style.cursor = "default";
}

работает так же, как и моя первая попытка, из которой я делаю вывод, что javascript распознает изменение таблицы стилей, но не имеет времени показать его перед погружением.в "кишки".Отделение изменений таблицы стилей от «кишок» и использование setTimeout, например, так:

function myFunc() {
  document.body.style.cursor = "progress";
  setTimeout(guts, 100);  // tried up to 5000ms
  document.body.style.cursor = "default";
}
function guts() {
  // main guts //
}

не выполняет предыдущих попыток, за исключением добавленной задержки, как если бы setTimeout в равной степени прерывал проявлениеИзменения в таблице стилей.

Использование функции alert () после изменения значения «progress» устраняет проблему, но не подходит для предполагаемого использования.Курсор должным образом проявляет свой новый стиль после оповещения и до погружения в «кишки» со следующим:

function myFunc() {
  document.body.style.cursor = "progress";
  alert("!"); // main guts //
  document.body.style.cursor = "default";
}

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

//// source
myFunc(guts);

//// target
function myFunc(cbFunc) {
  document.body.style.cursor = "progress";
  cbFunc();
  document.body.style.cursor = "default";
}
function guts() {
  // main guts //
}

, но это приводит к той же производительности, что и в случаях без предупреждения.Я также пытался использовать цвета фона вместо стилей курсора (в случае, если эта проблема была связана с курсорами), но безрезультатно.

Может ли кто-нибудь определить мои недоразумения с помощью такого типа управления потоком в javascript?

-UPDATES-

Также безрезультатно:

function myFunc() {
  document.body.style.cursor = "progress";
  document.body.style.cursor = guts();
}
function guts() {
  // main guts //
  return "default";
}

Спасибо dandavis за следующее решение:

function myFunc() {
  document.body.style.cursor = "progress";
  setTimeout(guts, 50);  // needs at least 10ms in my observations
}
function guts() {
  // main guts //
  document.body.style.cursor = "default";
}

Answer 1

вы близки со вторым.Вам просто нужно подождать, пока «кишки» закончат вращаться, прежде чем снова применить оригинальный стиль.Нижняя часть обратного вызова или тайм-аута является естественным местом для этого в течение идеального промежутка времени:

function myFunc() {
  document.body.style.cursor = "progress";
  setTimeout(guts, 1);

}

function guts() {
  // main guts //
  document.body.style.cursor = "default";
}

, изменяющийся на 1 мс, все же должен позволять стилю «просачиваться» без заметной задержки.