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

Question

У меня при нажатии на кнопку я исчезаю элемент пользовательского интерфейса, выполняю обработку, чтобы получить некоторые данные, а затем повторно отображаю этот элемент пользовательского интерфейса на основе полученных данных.Проблема здесь в том, что между анимацией и получением данных мы не можем быть уверены, что какая часть будет завершена первой.Итак, скажем, если сначала завершена анимация 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?

Answer 1

Обещания БУДУТ помогать при управлении асинхронными функциями.Вы должны вернуть обещание из обеих функций, а затем выполнить параллельно, используя Promise.all()

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

ref: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Promise/all