如何使用多个 settimeout 功能答案

【问题标题】：How to use multiple settimeout function如何使用多个 settimeout 功能
【发布时间】：2020-07-28 02:51:44
【问题描述】：

<!DOCTYPE html>
<html>
<body>
  <h1>Welcome page</h1>
  <script>
    setTimeout(function() {
      // after 2 seconds
      window.location = "https://www.w3schools.com/";
    }, 2000);

    setTimeout(function() {
      // after 5 seconds
      window.location = "https://stackoverflow.com/";
    }, 5000);
  </script>
</body>
</html>

虽然我在 2 秒后重定向到 w3school.com 后正在运行 html 页面，但在 5 秒后它不会转到 stackoverflow.com，我该如何同时运行这两个页面？

【问题讨论】：

一旦您重定向到另一个页面，原始页面中的所有 JavaScript 都会停止。
你不能这样做。
任何其他建议如何做
在第一个timeout 用户已经去w3schools 之后，没有办法做到这一点。
//nodejs app.get('/谢谢你',function(req,res){ res.render('thankyou' {message : '谢谢你的提交'}); });

标签： javascript html node.js settimeout

【解决方案1】：

一旦您从一个页面重定向到另一个页面，您就会破坏该页面的上下文，并且第二个超时将永远不会触发。如果您想滚动浏览一堆页面，则需要使用 iframe，以便页面保持加载并将目标放入 iframe。

【讨论】：

【解决方案2】：

解决方案在这里！！！ *使用 IFrame 。

<!DOCTYPE html>
<html>
<body>
  <h1>Welcome page</h1>
  <iframe id="myFrame" src="#"></iframe>
  <script>
    setTimeout(function() {
      // after 2 seconds
     document.getElementById("myFrame").src = "https://www.w3schools.com/";
    }, 2000);

    setTimeout(function() {
      // after 5 seconds
      document.getElementById("myFrame").src ="https://stackoverflow.com/";
    }, 5000);
  </script>
</body>
</html>

【讨论】：

【解决方案3】：

您可以使用 window.open 在新的浏览器选项卡中打开，同时保持同一页面的实例。

 <!DOCTYPE html>
 <html>

 <body>
    <h1>Welcome page</h1>
 </body>

 </html>

let w3Timer = setTimeout(function() {
   // after 2 seconds
   window.open("https://www.w3schools.com/");
   // Stop timer from infinite running.
   clearTimeout(w3Timer);
}, 2000);

let stTimer = setTimeout(function() {
   // after 5 seconds
   window.open("https://stackoverflow.com/");
   clearTimeout(stTimer)
}, 5000);

【讨论】：