JavaScript Promise Iterations-退出脚本标签，重新输入，然后删除HTML文件

如何解决JavaScript Promise Iterations-退出脚本标签，重新输入，然后删除HTML文件

我正在编写一个简短的程序，以了解JavaScript中的Promises。

该程序的目标是将一个数字列表（从5减少到0）打印到HTML页面上，每个数字之间的延迟为0.5s。打印0后，将弹出一个确认框，允许用户再次打印相同的数字或停止。

当前，下面的代码大部分可以正常工作，但是在内部循环的第一次和第二次迭代（在countdown()函数中）的行为非常奇怪-在打印第一个{{ 1}}和5。

我已经在chrome开发人员中对其进行了很多调试，以尝试找出正在发生的情况，因此，我在程序的下面提供了有关程序实际执行（或似乎正在执行）操作的逐步指南。代码部分，用粗体显示奇怪的行为。

这是大学的一项无记名的工作，我设法挫败了我的教授，因此我们将不胜感激。预先感谢！

// wait time for setTimeout
var wait = 500;

function timer(ms) {
  return new Promise((res) => {
    setTimeout(res,ms);
  });
}

async function countdown() {
  for (let i = 5; i >= 0; i--) {
    document.write("<br>");
    document.write(i);
    console.log(i);
    await timer(wait).then();
  }
  var c = confirm("Do you want to go again?");
  document.write("<br>User Confirm:");
  document.write(c);
  console.log(c);
  return c;
}



async function repeatRun() {
  var prom = new Promise(async(res,rej) => {
    r = await countdown();
    if (r) {
      res();
    } else {
      rej();
    }
  });
  prom.then(
    data => {
      document.write("<br>RERUN");
      console.log("RERUN");
      repeatRun();
    },error => {
      document.write("<br>ENDED");
      console.log("ENDED");
    }
  );
}

repeatRun();

这是我的程序正在逐步执行的操作：

显示HTML页面标题等
输入<!DOCTYPE html> <html> <head> <title>Countdown</title> </head> <body> <h1>Countdown</h1> <p>Internet Applications Ex1.</p> </body> </html>标签
输入script
创建Promise变量repeatRun()并输入prom
countdown()循环的第一次迭代（即for）

5.1。使用i=5打印<br>和5，都被附加到HTML正文

5.2。输入document.write()

5.3。返回timer()

5.4。 此承诺返回到new Promise内部的prom.then()，而不是像我期望的那样repeatRun()致电

此后，无论是否使用await timer()，我都尝试过此方法，它的作用相同[在Chrome调试器上一步完成]
退出.then()标签
重新输入script标签，但不是从头开始：它返回到script循环并减小for

当前HTML文件：
```
i
```
下一个document.write（）调用，不是将<html> <head> <title>Countdown</title> </head> <body> <h1>Countdown</h1> <p>Internet Applications Ex1.</p> <script>...</scri pt> <br> "5" </body> </html>附加到HTML正文，而是将旧的HTML正文替换为<br>，<br>标签也被删除
下一个document.write（）将head（现在为4）附加到新的HTML文件中当前的HTML文件：
```
i
```

这是程序开始按预期运行的地方 10.进入<html> <head></head> <body> <br> "4" </body>函数，然后返回到timer() 11.按预期循环，直到countdown()

i=0

此循环后，弹出确认窗口：单击“确定”，将11.1. `document.write()` appends to HTML body instead of rewriting 11.2. `timer()` function is called and returns to `countdown()` function afterwards存储在true中，使用c打印，然后返回并存储在{{1}中}
自document.write()以来，r成功，并且r=true被调用
输入if，然后将res()和prom.then()正确地将data =>附加到HTML正文
document.write函数被递归调用
创建新的promise var并调用"<br>RERUN"
这一次，repeatRun()循环如期发生（即在步骤11中），从countdown()到for
循环后，我在确认窗口中单击“取消”，将i=5设置为i=0，进行打印，然后返回并存储在c
由于false，r失败并且r=false被调用
先输入if，然后再输入rej()和document.write将prom.then()正确地附加到HTML正文
退出error =>标签

解决方法

MDN documentation for documentation.write()说

注意：因为document.write（）写入文档流，所以在关闭的（已加载）文档上调用document.write（）会自动调用document.open（），这将清除文档。

因此，第一次（第一次迭代）文档以某种方式未完全加载，这意味着它是打开的，因此document.write()照常工作。但是在第一次迭代之后，文档以某种方式完成了加载，因此现在关闭了该文档，现在当它调用document.write()时，由于已关闭，因此必须再次打开该文档，从而清除了整个文档文档（5被4取代），在其余的迭代中，文档保持打开状态，因此它照常工作。

您不应使用document.write()，而应使用任何其他方法来更改页面的内容。

JavaScript Promise Iterations-退出脚本标签，重新输入，然后删除HTML文件

如何解决JavaScript Promise Iterations-退出脚本标签，重新输入，然后删除HTML文件

解决方法

相关推荐