Angular中不使用setTimeout如何实现按顺序调用函数？

如果你的allData是异步执行的函数，以下是3种不同适用场景的实现方案，优先推荐async/await方案：

方案1：Promise + async/await（最通用推荐） #

将allData封装为返回Promise的形式，通过await关键字等待执行完成后再调用后续函数，逻辑清晰，便于异常捕获和维护：

// 改造allData，返回Promise实例
function allData() {
  return new Promise((resolve, reject) => {
    // 此处写入你原有allData的业务逻辑，比如接口请求、IO操作等
    setTimeout(() => {
      console.log('allData执行完毕')
      resolve() // 逻辑执行成功后调用resolve，失败时调用reject
    }, 1000)
  })
}

// 你的后续业务函数
function funcA() {
  console.log('后续函数A执行')
}
function funcB() {
  console.log('后续函数B执行')
}

// 执行逻辑
async function run() {
  try {
    await allData()
    // allData执行完成后才会触发后续函数
    funcA()
    funcB()
  } catch (err) {
    console.error('allData执行出错：', err)
  }
}

run()

方案2：回调函数（仅适合简单单一场景） #

把后续要执行的函数作为参数传入allData，在allData逻辑执行完成的节点主动触发回调：

function allData(callback) {
  // 原有业务逻辑
  setTimeout(() => {
    console.log('allData执行完毕')
    // 执行完成后调用传入的回调函数
    callback && callback()
  }, 1000)
}

function nextFunc() {
  console.log('后续函数执行')
}

// 调用时直接传入后续函数
allData(nextFunc)

方案3：事件订阅/发布（适合多依赖解耦场景） #

如果有多个不同业务模块的函数都需要等待allData完成后执行，可通过事件机制解耦，避免多层嵌套：

// 简易事件中心
const eventHub = {
  events: {},
  on(eventName, handler) {
    this.events[eventName] = this.events[eventName] || []
    this.events[eventName].push(handler)
  },
  emit(eventName, ...args) {
    this.events[eventName]?.forEach(handler => handler(...args))
  }
}

// 改造allData
function allData() {
  setTimeout(() => {
    console.log('allData执行完毕')
    // 触发完成事件
    eventHub.emit('allData:done')
  }, 1000)
}

// 不同业务模块注册监听
eventHub.on('allData:done', () => {
  console.log('模块1的后续函数执行')
})
eventHub.on('allData:done', () => {
  console.log('模块2的后续函数执行')
})

// 启动执行
allData()

注意事项 #

• 如果allData本身是同步执行的函数，不需要额外处理，直接按代码顺序调用即可，JS本身会按顺序执行同步代码
• 涉及多层异步嵌套的复杂场景，优先选择async/await方案，避免出现回调地狱问题

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