Индикация загрузки во время выполнения функции

[KiZZek]

Не могу нормально сформулировать запрос в гугле и найти конкретную информацию.
У меня есть функция, которая может выполнятся около 30 секунд, нужно сделать что-то на подобии анимированной индикации во время выполнения функции.

Как я представляю реализацию:

function my(){
document.getElementById('something').hidden = false;

//Тело функции

document.getElementById('something').hidden = true;
}

А скрывать и показывать что-то вроде этого.

Но боюсь, что здесь будет непорядок с потоками и асинхронностью.
Подскажите, как правильно сделать. А то чувствую, что это велосипед.

[tsigel]

KiZZek,
Если функция асинхронная то используйте промисы:

var togglePreloader = function () {
  alert('Спрятали/показали прелоадер');
}

var longFunction = function () {
  togglePreloader();
  return new Promise(function (resolve) {
    // Тело функции
    setTimeout(resolve, 2000); // Вместо таймаута вызывайте resolve в конце рассчетов/запросов и т.д.
  });
};

longFunction().then(function () {
  alert('Расчет закончен');
  togglePreloader();
});

[demoniqus]

а я в подобных случаях делаю функцию с самовызовом через нулевой таймаут.
setTimeout(function(){}, 0) выполнит указанную функцию сразу по окончании текущей функции. При этом происходит разрыв цепочки выполнения и интерфейс может обновиться. Во-вторых, это позволяет избежать проблем с уведомлением о зависшей функции, особенно в IE с его "гениальным" способом определения зависа. В-третьих, этот способ будет поддерживаться бОльшим количеством браузеров.
Если же функция использует какой-либо циклический код, а является так сказать набором последовательных команд, ее можно разбить на несколько частей и вызывать эти части друг за другом.

Из минусов - более громоздкий код.