Javascript 如何简化ReactJS中的setTimeout

有一个纯javaScript的打字动画，已经转换成ReactJS。根据ReactJS标准，

setTimeout

函数看起来不干净，也不符合最佳实践

例如

animationManager（）

使用所有这些

setTimout

，是否可以使它更干净

---

完整代码通常的做法是使用该代码。您可以创建使用requestAnimationFrame的helper Promise，并通过在Resolve上添加成功回调使流平坦且“可启用”。

是的，您可以实际创建类似计时器的函数：它返回一个在时间用完时解析的Promise，如下所示：

timer=（持续时间）=>{
返回新承诺（解决=>{
setTimeout（解析、持续时间）；
});
}

同样，您也可以对

requestAnimationFrame

执行相同的操作。诀窍是使用ES6 spread运算符，以便可以将任意数量的参数传递到要调用的回调中：

animationFrame=（回调，…args）=>{
返回新承诺（解决=>{
window.requestAnimationFrame（时间=>{
回调（时间，…args）；
});
})
}

由于您使用的是ES6，因此可以使用

async

函数等待计时器完成，然后再继续执行下一行代码。如果我们分解您的

animationManager（）

代码，它可以如下所示：

您想从

typingEffect

完成

typingEffect

后，您希望触发

deleteffect

在这种情况下，我们可以重构您的代码：

animationManager=（）=>{
常量deleteFunc=（时间，键入数据）=>{
this.deleteffect（time，async（）=>{
等待这个.timer（这个.props.pauseBeforeRestarting）；
this.index=this.index==typingData.length-1？0:this.index+1；
这个.animationManager（）；
});
};
常量typeFunc=（时间）=>{
const typingData=this.props.data；
this.typeEffect（时间，typingData[this.index]，async（）=>{
等待这个.timer（这个.props.pauseBeforeDeleting）；
等待这个.animationFrame（deleteFunc，typingData）；
})
};
此.animationFrame（typeFunc）；
};

---

我已经给出了您的示例，为稍微经过重构的代码提供了概念证明：

我投票将这个问题作为离题题来结束，因为代码正在按原样工作。问题在于，与setTimeout相比，重构要简单得多。我会将每个回调封装成一个承诺，并通过await@YuryTarabanko我很遗憾看到你投了一票。不幸的是，在codereview页面中甚至没有视图。非常感谢您的帮助。仅供参考，仍与原件相同code@Mo.我的坏，看起来我忘了点击保存：）现在修复！明白了，看起来很棒

animationManager = () => {
  this.rafRef = requestAnimationFrame(time => {
    const typingData = this.props.data;
    this.typeEffect(time, typingData[this.index], () => {
      this.timeoutRef = setTimeout(() => {
        this.rafRef = requestAnimationFrame(time => {
          this.deleteEffect(time, () => {
            this.timeoutRef = setTimeout(() => {
              this.index =
                this.index === typingData.length - 1 ? 0 : this.index + 1;
              this.animationManager();
            }, this.props.pauseBeforeRestarting);
          });
        });
      }, this.props.pauseBeforeDeleting);
    });
  });
};