如何让它等到执行新代码

Question

那么我如何让它等待 1000 毫秒直到它执行不同的代码（顺便说一句，What is the JavaScript version of sleep()? IS NOT帮助我，所以请不要关闭这个问题（我对 JavaScript 不是很好）。
这是我的代码：

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

<script>
document.addEventListener('keydown',function(e){
    if(e.keyCode==13){ 
        newPageTitle = 'Executing...';
        document.title = newPageTitle;
        //wait goes here
        newPageTitle = 'Loading...';
        document.title = newPageTitle;
        //wait goes here
        newPageTitle = 'Fetching Data...';
        document.title = newPageTitle;
        //wait goes here
        newPageTitle = 'Done!';
        document.title = newPageTitle;
        //wait goes here
        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>

我想要它做的是每当你按下 enter 它改变标题，然后它等待 1000 毫秒再次改变磁贴，然后它等待 680 毫秒将你重定向到另一个网页（也是出于某种原因当它在代码片段中时您必须单击代码段区域，然后您可以按 enter 键）。

Answer 1

要在文档标题上制作动画，这将是一系列嵌套的 setTimeout() 函数，如下所示：

setTimeout(function () {
  document.title = "Executing...";
  setTimeout(function () {
    document.title = "Loading...";
    setTimeout(function () {
      document.title = "Fetching Data...";
      setTimeout(function () {
        document.title = "Done!";
        setTimeout(function () {
          window.location.href = "https://example.com";
        }, 1000);
      }, 4000);
    }, 3000);
  }, 2000);
}, 1000);

我同意这很丑。而且你必须计算从外部到内部增加的延迟......所以你可以有一个函数来设置超时并使你的代码可读和可维护。

注意那个漂亮的脚本：

wait(1000, 'Executing...')
wait(2000, 'Loading...')
wait(3000, 'Fetching Data...')
wait(4000, 'Done!')
wait(1000)

这是一个演示，我在其中控制台记录了标题文本...因为否则我们将看不到效果，因为该片段是 iframe.

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
    wait(1000, 'Executing...')
    wait(2000, 'Loading...')
    wait(3000, 'Fetching Data...')
    wait(4000, 'Done!')
    wait(1000)
  }
});

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;
  }
}

// A global variable to sum up the delays
let wait_time = 0;

function wait(delay, message) {

  // Each "wait" call is adding its delay to the global wait_time
  wait_time += delay

  // This is the delay to use in this timeout
  // "let" making it scoped to this function call
  let timeoutDelay = wait_time;
  console.log(timeoutDelay)

  // Set a timeout
  setTimeout(function() {

    // If there is a message, use it on the title.
    // else, redirect
    if (message) {
      console.log(message)
      document.title = message;
    } else {
      window.location.href = ('https://example.com');
    }
  }, timeoutDelay)
}

<div id="changeText" style="font-family:verdana;"><br><br> Press ENTER to continue</div>

如何让它等到执行新代码

how to make it have a wait until it executes a new code

html

javascript

wait

milliseconds