求助：使用Promise同步函数调用时出现ReferenceError错误

首先，咱们先拆解下你遇到的问题：你看到的Uncaught (in promise) ReferenceError: result is not defined错误，是因为你在Promise里调用了fulfill(result)，但result这个变量从始至终都没被声明过——这是第一个小bug。

但更核心的问题是：你没有等第一个print(0,s1)执行完毕，就直接调用了fulfill，导致Promise立刻进入完成状态，所以第二个print(0,s2)还是会和第一个同时启动，根本达不到你想要的顺序执行效果。

要解决这个问题，咱们得先把print函数改造成返回Promise的异步函数，这样我们才能明确知道它什么时候完成，再通过then链式调用实现顺序执行。

修正后的完整代码 #

var h1 = $('#title>h1');

$(window).ready(function(){
  var s1 = "WELCOME.";
  var s2= "Projects";
  
  // 先执行第一个print，完成后再启动第二个
  print(0, s1)
    .then(() => print(0, s2))
    .catch(error => console.error('执行出错:', error));
});

function print(i, st) {
  // 让print返回一个Promise，外部可以监听它的完成状态
  return new Promise((resolve) => {
    const timer = setTimeout(() => {
      // 更新标题文本
      h1.text(st.substr(0, i));
      
      if (i < st.length) {
        // 递归调用print，等递归的Promise完成后再resolve当前Promise
        print(i + 1, st).then(() => {
          clearTimeout(timer);
          resolve();
        });
      } else {
        // 字符串已经打印完毕，标记当前Promise完成
        clearTimeout(timer);
        resolve();
      }
    }, 250);
  });
}

关键改动说明 #

• 让print返回Promise：这样每次调用print时，我们都能通过then方法监听它的完成事件，确保前一个任务结束后再启动下一个。
• 递归时等待子任务完成：当需要递归调用print时，要等递归的Promise执行完毕后，再resolve当前的Promise，这样整个字符串的打印过程会作为一个完整的异步任务，完成后才会触发后续的then。
• 替换硬编码的长度判断：把原来的i<8改成i < st.length，适配不同长度的字符串，避免出现多打印或打印不全的问题。
• 移除无意义的result变量：你原来的Promise里用的result完全没必要，我们只需要确认任务完成，不需要传递额外结果，直接调用resolve()即可。

这样修改后，第一个字符串会逐字符打印完成，之后才会开始打印第二个字符串，完美实现你想要的顺序执行效果。

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