Question

我有一个单击按钮，我淡出了UI元素，进行处理以接收一些数据，然后根据接收到的数据重新呈现该UI元素。这里的问题是，在动画和接收数据之间，我们不能确定哪个部分将首先完成。因此，假设淡出动画首先完成，那么我必须等到接收到所需的数据，或者先说我首先接收到数据，然后再等动画完成。现在，我正在通过调用一个通用函数来处理它，该函数将首先检查两个条件是否都满足，如果不满足则返回。
我的伪代码-

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
}

此解决方案有效，但我不喜欢它，因为它有点hacky，很难为别人所理解。为了使它更整洁，我考虑过使用JavaScript Promise，但是Promise似乎并不能帮助您，或者我无法提出使用Promise的方法。可以使用任何更干净的方法在javascript中进行编码吗？

Answer 1

在管理异步功能时，将提供帮助。您必须从两个函数中返回一个Promise，然后使用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

如何使用JavaScript中的动画处理比赛条件

1 个答案: