JavaScript回调函数执行顺序错乱、重复打印问题

代码存在3个核心问题，直接导致执行顺序混乱、日志重复打印：

• 异步函数未执行传入的回调：getUsername、getPassword虽然定义了callback形参，但内部setTimeout异步任务完成后，没有调用传入的callback，而是硬编码直接调用全局作用域下的validateUsername、validatePassword，传入的嵌套后续逻辑完全不会按预期触发。
• 回调传参写法错误导致同步提前执行：login函数中getUsername(validateUsername(username => { ... }))的写法是同步立即执行的——代码运行到这一行时，会立刻调用validateUsername，把后面的箭头函数当做username参数传入，提前触发校验日志打印；等3秒后setTimeout到期，getUsername内部又会调用一次全局validateUsername，直接造成日志重复打印。
• 校验函数无流程衔接逻辑：validateUsername、validatePassword执行完校验后只打印日志，没有预留后续流程的触发入口，就算前面的回调传对了，也没法在用户名校验通过后再触发密码获取、校验的逻辑。

另外代码里写的username === username、pass === pass判断恒为真，属于逻辑冗余，不会直接造成流程错误，但不符合校验逻辑的编写预期。

按照回调异步流程的规范改造代码即可：

1. 改造getUsername、getPassword，异步拿到结果后执行传入的回调，把结果作为参数传给回调，不要硬编码调用全局校验函数
2. 给校验函数增加回调参数，校验通过后执行后续回调，衔接整个登录流程
3. 修正login中的回调传参逻辑，按执行顺序嵌套传递回调函数，不要直接在参数位执行函数

修正后的完整代码：

var getUsername = (callback) => {
  console.log("Getting username...")
  setTimeout(() => {
    let username = "srishti"
    console.log(`Username = ${username}`)
    // 异步拿到结果后执行传入的回调，把用户名传出去
    callback(username)
  }, 3000)
}

let validateUsername = (username, callback) => {
  console.log("Validating username...")
  // 这里替换成实际的用户名校验规则，示例保留合法逻辑
  if (username === "srishti") {
    console.log("Valid Username!")
    // 校验通过后执行后续回调
    callback()
  } else {
    console.log("Invalid Username! Please try again!")
  }
}


var getPassword = (callback) => {
  console.log("Getting password...")
  setTimeout(() => {
    let pass = "upgrad"
    console.log(`Password = ${pass}`)
    // 异步拿到结果后执行传入的回调，把密码传出去
    callback(pass)
  }, 3000)
}

let validatePassword = (pass, callback) => {
  console.log("Validating password...")
  // 这里替换成实际的密码校验规则，示例保留合法逻辑
  if (pass === "upgrad") {
    console.log("Valid Password!")
    // 校验通过后执行后续回调
    callback()
  } else {
    console.log("Invalid Password! Please try again!")
  }
}

let done = () => {
  console.log("BOTH VALID!")
}

const login = () => {
  // 按顺序嵌套传递回调，不要直接在参数位调用函数
  getUsername((username) => {
    validateUsername(username, () => {
      getPassword((pass) => {
        validatePassword(pass, done)
      })
    })
  })
}

login()

运行后输出和预期完全一致：

Getting username...
Username = srishti
Validating username...
Valid Username!
Getting password...
Password = upgrad
Validating password...
Valid Password!
BOTH VALID!

注：这种多层嵌套回调就是常说的“回调地狱”，如果后续流程更复杂，建议替换为Promise+async/await的写法优化可读性。

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