JavaScript函数回调忽略执行顺序问题：如何实现函数依次执行？

我尝试编写一些能等待其他函数执行完成后再自身执行的函数，已经试过用函数回调，但完全不起作用——所有函数还是同时执行了。以下是我的代码：

const mainContent = document.getElementById('mainContent');
const teleContent = document.getElementById('teleportHover');
const navbContent = document.getElementById('myNavbar');
const boutContent = document.getElementById('aboutme')
//Do animation first
const anima = (callback) => {
  lableRelease();
  sliderTopRelease();
  obmGo();
}
//Then Boom!
const teleDis = (callback) => {
  teleContent.style.opacity = '0';
  teleContent.style.transition = '1s';
}
const mainDis = (callback) => {
  mainContent.style.opacity = '0';
  mainContent.style.transition = '1s';
}
const removeOld = () => {
  mainContent.style.display = 'none';
}
flame.addEventListener('click', () => {
  anima(teleDis(mainDis(removeOld())));
})

请问我是不是遗漏了回调函数的使用规则？还是这个方法不适用于我的场景？如果有其他实现函数按顺序执行的方法，恳请告知。

问题根源分析 #

你遇到的问题主要有两个核心原因：

1. 回调函数的使用方式完全错误
   你现在的调用anima(teleDis(mainDis(removeOld())))是直接执行了所有函数：先跑removeOld()，把它的返回值（undefined）传给mainDis()，再把mainDis()的返回值传给teleDis()，最后把teleDis()的返回值传给anima()。这根本不是回调的用法——回调需要传递函数本身，而不是函数执行后的结果。
   另外，你的anima、teleDis这些函数虽然定义了callback参数，但内部根本没有调用这个回调，所以后续的函数永远不会被触发。

2. CSS过渡是异步的，你没等待过渡完成
   即使你写对了回调，直接在触发过渡后立刻执行下一个函数也没用——浏览器会在当前JS代码执行完后才会渲染过渡动画，所以看起来所有变化还是同时发生的。必须等待过渡动画真正结束后，再执行下一个步骤。

解决方案：两种实现顺序执行的方式 #

方式一：正确使用回调 + 监听过渡结束事件

我们需要修改函数，让它们在过渡动画完成后调用传入的回调，同时正确传递回调函数：

const mainContent = document.getElementById('mainContent');
const teleContent = document.getElementById('teleportHover');
const navbContent = document.getElementById('myNavbar');
const boutContent = document.getElementById('aboutme')

// 工具函数：等待指定元素的过渡结束，超时兜底防止事件未触发
function waitForTransition(element, timeout = 1000) {
  return new Promise(resolve => {
    const handleEnd = () => {
      element.removeEventListener('transitionend', handleEnd);
      resolve();
    };
    element.addEventListener('transitionend', handleEnd);
    setTimeout(resolve, timeout);
  });
}

// 修改anima：执行动画后等待过渡完成，再调用回调
const anima = (callback) => {
  lableRelease();
  sliderTopRelease();
  obmGo();
  
  // 假设你的动画最终是作用在mainContent上，等待它的过渡结束
  waitForTransition(mainContent).then(callback);
}

// 修改teleDis：触发过渡后等待完成，再调用回调
const teleDis = (callback) => {
  teleContent.style.opacity = '0';
  teleContent.style.transition = 'opacity 1s'; // 明确过渡属性更可靠
  waitForTransition(teleContent).then(callback);
}

// 修改mainDis：同理
const mainDis = (callback) => {
  mainContent.style.opacity = '0';
  mainContent.style.transition = 'opacity 1s';
  waitForTransition(mainContent).then(callback);
}

const removeOld = () => {
  mainContent.style.display = 'none';
}

// 正确传递回调：用匿名函数包裹，传递函数本身而不是执行结果
flame.addEventListener('click', () => {
  anima(() => {
    teleDis(() => {
      mainDis(removeOld);
    });
  });
})

方式二：用Promise + async/await（更简洁易读）

这种方式用现代JS语法让异步代码看起来像同步代码，更易维护：

const mainContent = document.getElementById('mainContent');
const teleContent = document.getElementById('teleportHover');
const navbContent = document.getElementById('myNavbar');
const boutContent = document.getElementById('aboutme')

// 工具函数：等待元素过渡完成
function waitTransition(element, timeout = 1000) {
  return new Promise((resolve) => {
    const onEnd = () => {
      element.removeEventListener('transitionend', onEnd);
      resolve();
    };
    element.addEventListener('transitionend', onEnd);
    setTimeout(resolve, timeout);
  });
}

// 用async标记异步函数
const anima = async () => {
  lableRelease();
  sliderTopRelease();
  obmGo();
  await waitTransition(mainContent); // 等待动画过渡完成
}

const teleDis = async () => {
  teleContent.style.opacity = '0';
  teleContent.style.transition = 'opacity 1s';
  await waitTransition(teleContent);
}

const mainDis = async () => {
  mainContent.style.opacity = '0';
  mainContent.style.transition = 'opacity 1s';
  await waitTransition(mainContent);
}

const removeOld = () => {
  mainContent.style.display = 'none';
}

// 点击事件用async函数，按顺序await每个步骤
flame.addEventListener('click', async () => {
  await anima();
  await teleDis();
  await mainDis();
  removeOld();
})

额外注意点 #

• 一定要明确指定过渡属性（比如transition: opacity 1s），而不是只写transition: 1s——这样可以避免意外影响元素其他属性的过渡，也让代码更清晰。
• 如果你的lableRelease()、sliderTopRelease()、obmGo()这些函数各自操作不同的元素，你可能需要等待所有元素的过渡都完成，这时候可以用Promise.all()来合并多个等待请求。

内容的提问来源于stack exchange，提问作者Senzawa