Как справиться с состоянием гонки с анимацией в javascript

У меня есть кнопка, при нажатии на которую я исчезаю элемент пользовательского интерфейса, выполняю обработку для получения некоторых данных, а затем повторно отображаю этот элемент пользовательского интерфейса на основе полученных данных. Проблема здесь в том, что между анимацией и получением данных мы не можем быть уверены, какая часть будет завершена первой. Итак, скажем, если анимация fadeOut завершена первой, мне нужно подождать, пока я не получу необходимые данные, или, скажем, я сначала получу данные, а затем я должен дождаться завершения анимации. Прямо сейчас я обрабатываю это, вызывая общую функцию, которая сначала проверяет, выполняются ли оба условия, и если какое-либо из них не выполняется, она возвращается.
Мой псевдокод -

onButtonClick() {
    doSomeServiceCall(); //The data will be received in an already registered callback which I cant change.
    startFadeOutAnimation(commonFunction) //commonFunction is invoked on completion of animation
}

callBackFunctionToRecevieDataFromService (data) {
    var receivedData = data;
    if (animationStillGoingOn) {
        return;
    }
    else {
        commonFunction();
    }
}


commonFunction() {
      if (receivedData == null || AnimationNotCompletedYet)
          return;
      performReRenderOfUIComponent; //re-rendering of ui element
}

Это решение работает, но мне оно не нравится, потому что оно довольно хакерское и его трудно понять кому-то другому. Чтобы сделать его чище, я подумал об использовании обещаний javascript, но не похоже, что обещания помогут, или, может быть, я не могу придумать подход, который использует обещания. Может ли быть какой-нибудь более чистый подход к кодированию этого в javascript?