如何在（JavaScript）中第一个函数完成后才启动函数

我不是在寻找jQuery解决方案。我尝试了使用Promise方法，但也不起作用。我尝试了回调方法，但运气不好。现在，作为一个测试，我只想让它在控制台上打印一些东西。之后我会做实际的代码

我很高兴为您编码

这是我正在尝试的回调方法，因为我认为它是最简单的

const logoAnimation = () => {      
  this.logo.classList.add('fade-out-zoom-out');
  this.blueCnt.classList.add('fade-out');
  this.circWrapper.classList.add('dashed-border');
  this.clickAbove.classList.add('text-fade-out');
  this.welcome.classList.add('text-fade-in');   
}

const rotateBorder = () => {
  console.log('I run after animation')
}

const render = () => {
  console.log(logoAnimation())
    
  logoAnimation(() => {
    rotateBorder();
  })          
}

我确实尝试过承诺的方法。。。我认为任何一个都是坦率的（请解释一下）

然后只是从某个地方打个电话

<img class="logo" id="logo" onclick="render()" src="/path/img"/>

---

两个版本中的问题基本相同

在第一个例子中，

logoAnimation

的实现并不关心您传递给它的回调—事实上，它根本不接受任何参数，因此它很乐意忽略传递给它的任何内容。如果要向其传递回调，则需要确保在函数中调用它（“回调”-“回调”一词就是从这里来的！）：

const logoAnimation = (callback) => {      
  this.logo.classList.add('fade-out-zoom-out');
  this.blueCnt.classList.add('fade-out');
  this.circWrapper.classList.add('dashed-border');
  this.clickAbove.classList.add('text-fade-out');
  this.welcome.classList.add('text-fade-in');
  callback();
}

在Promise版本中，您同样从不调用

resolve

，这是传递给

.then

处理程序的函数。因此，要使该版本正常工作，您需要如下更改实现：

  function logoAnimation() {     
    return new Promise(function(resolve, reject) {
      this.logo.classList.add('fade-out-zoom-out');
      this.blueCnt.classList.add('fade-out');
      this.circWrapper.classList.add('dashed-border');
      this.clickAbove.classList.add('text-fade-out');
      this.welcome.classList.add('text-fade-in');
      resolve();
    })  
  }

---

我会注意到，虽然一般来说，我非常喜欢使用承诺来实现异步代码，而不是老式的意大利面回调，但在您的示例中没有异步操作，因此我认为没有必要实现承诺-我只会坚持使用基于回调的版本，假设您需要调用

logoAnimation

来指定下一步应该发生什么。

一个快速而肮脏的解决方案是使用超时：

  const logoAnimation = () => {      
    this.logo.classList.add('fade-out-zoom-out');
    this.blueCnt.classList.add('fade-out');
    this.circWrapper.classList.add('dashed-border');
    this.clickAbove.classList.add('text-fade-out');
    this.welcome.classList.add('text-fade-in');
    setTimeout(()=>{
        rotateBorder();
    }, 3000);
  }

---

不幸的是，css转换无法控制JavaScript。你的问题不在于函数的顺序

为了达到您想要的效果，您应该使用

setTimeout

函数并自己计算这些持续时间

您可以使用“等待”功能来模拟等待：

const wait=ms=>newpromise（resolve=>setTimeout（resolve，ms））；
让logo=document.getElementById（'logo'）；
设blueCnt=document.getElementById（'blueCnt'）；
设circWrapper=document.getElementById（'circWrapper'）；
让ClickUpper=document.getElementById（'ClickUpper'）；
让welcome=document.getElementById（'welcome'）；
函数logoAnimation（）{
这个.logo.classList.add（'fade-out-zoom-out'）；
this.blueCnt.classList.add（'fade-out'）；
this.circWrapper.classList.add（'虚线边框'）；
点击上面的.classList.add（'text-fade-out'）；
this.welcome.classList.add（'text-fade-in'）；
}
常量旋转顺序=（）=>{
console.log（'我在动画之后运行'）
}
函数render（）{
logoAnimation（）
等待（1000）。然后（旋转订单）
}

---

还要注意的是，如果在

Promise

回调中不调用

resolve

函数，它将无法实现，并且函数调用也不会到达链接的

。然后
如果要按顺序运行两个同步函数，可以一次运行一个：

func1(); 
func2(); // Only runs after func1 has completed.

标题中有问题，问题中有代码。您的实际问题是什么？在回调代码中，您将回调函数传递给
logoAnimation
，但是
logoAnimation
不需要任何参数。您已经添加了一个参数，并在正文末尾调用它。我试图将它作为一段代码保存下来，可以从在线编辑器中共享，但还有其他函数需要先读取并执行，还有其他一组函数将异步运行。谢谢你的帮助！
func1(); 
func2(); // Only runs after func1 has completed.