代码之家 › 专栏 › 技术社区 › LOTUSMS

如何在(JavaScript)中完成第一个函数后才触发函数

javascript

LOTUSMS · 技术社区 · 4 年前

我不是在寻找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();
  })          
}

我试过承诺的方法。。。我认为两个都是坦率的(请解释一下)

  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'); 
    })  
  }

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

  function render() {
    logoAnimation().then(function () {
      rotateBorder()
    })
  }

然后只是从某处打个电话

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

4 回复 | 直到 4 年前

Robin Zigmond 4 年前

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

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();
}

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();
    })  
  }

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

pouria 4 年前

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

为了达到你想要的,你应该使用 setTimeout

您可以使用“wait”函数来模拟等待:

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

let logo = document.getElementById('logo');
let blueCnt = document.getElementById('blueCnt');
let circWrapper = document.getElementById('circWrapper');
let clickAbove = document.getElementById('clickAbove');
let welcome = document.getElementById('welcome');

function 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')
}

function render() {
  logoAnimation()
  wait(1000).then(rotateBorder)
}

还要注意的是,如果你不打电话 resolve 内部函数 Promise 回调,它将无法实现,并且您的函数调用将无法到达链接 .then

Evert 4 年前

如果要按顺序运行两个同步函数,可以一次运行一个:

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

-2

Trent Deckard 4 年前

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

  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);
  }