如何实现JavaScript代码延迟执行，按回车后依次修改标题再跳转

你可以用async/await语法配合自定义睡眠函数实现需求，写法和你原本的线性执行逻辑完全匹配，学习成本很低，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Start</title>
</head>
<body>
<div id="changeText" style="font-family:verdana;"><br><br>
Press ENTER to continue</div>

<script>
// 自定义等待函数，传入要等待的毫秒数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 把事件回调改成async函数，才能使用await
document.addEventListener('keydown', async function(e){
    if(e.keyCode==13){ 
        newPageTitle = 'Executing...';
        document.title = newPageTitle;
        // 等待1000毫秒
        await sleep(1000);
        newPageTitle = 'Loading...';
        document.title = newPageTitle;
        await sleep(1000);
        newPageTitle = 'Fetching Data...';
        document.title = newPageTitle;
        await sleep(1000);
        newPageTitle = 'Done!';
        document.title = newPageTitle;
        // 最后等待680毫秒再跳转
        await sleep(680);
        window.location.href = 'https://example.com';
    }
});
</script>
<script>
var text = ["<br><br>Press ENTER to continue_", "<br><br>Press ENTER to continue"];
var counter = 0;
var elem = document.getElementById("changeText");
var inst = setInterval(change, 700);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}
</script>
</body>
</html>

• 新增了独立的sleep工具函数，调用时传入需要等待的毫秒数即可
• 把键盘事件的回调函数前面加了async关键字，标识这是异步函数，才能使用await语法触发等待
• 在每一步修改标题的代码后，增加await sleep(1000)实现等待1秒的效果，最后一步跳转前等待680毫秒

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