如何使用JavaScript在5秒后重定向网页

在本教程中，我们学习如何使用JavaScript在5秒钟后重定向网页。要在5秒钟后重定向网页，使用 setInterval() 方法设置时间间隔。将网页添加到 window.location.href 对象中。

正如我们所知，无论何时我们需要在特定延迟时间后调用函数或一些代码块，我们使用JavaScript的 setTimeout() 和 setInterval() 方法。让我们来看一下如何使用这些方法在5秒钟后重定向网页。

要重定向网页，我们将使用JavaScript的 document.location.href 或 window.location.href 对象如下所示：

document.location.href="";
   OR
window.location.href="";

让我们逐步详细了解使用setTimeout()和setInterval()方法以及document.location.href对象延迟网页重定向5秒的用法。

使用setTimeout()方法

我们将像往常一样使用setTimeout()方法，通过给它一个回调函数并指定一个特定的时间限制，之后它将调用回调函数来重定向网页。

语法

以下语法将被用于实现setTimeout()方法和document.location.href对象 –

setTimeout(callBack_func, timeInterval);
function callBack_func() {
   document.location.href = "";
}

让我们了解代码实现 setTimeout() 方法在 5 秒后重定向页面。

算法

步骤 1 - 在第一步中，我们将为 HTML 文档中的按钮标签关联的 onclick 事件定义一个回调函数。
步骤 2 - 在这一步中，我们将在前一步中声明的函数内部使用回调函数和时间间隔调用 setTimeout() 方法。
步骤 3 - 在最后一步中，我们将定义 setTimeout() 方法的回调函数，该函数使用 document.location.href 对象在给定的时间间隔后重定向页面。

示例

下面的代码示例将解释如何使用 setTimeout() 方法延迟 5 秒钟重定向网页 –

<!DOCTYPE html>
<html>
<body>
   <h2>Using JavaScript to resirect a webpage after 5 seconds </h2>
   <p id = "result"></p>
   <button onclick = "redirect()">Click to Redirect to Tutorials Point</button>
   <script>
      function redirect () {
         setTimeout(myURL, 5000);
         var result = document.getElementById("result");
         result.innerHTML = "<b> The page will redirect after delay of 5 seconds";
      }

      function myURL() {
         document.location.href = 'https://www.tutorialspoint.com/index.htm';
      }
   </script>
</body>
</html>

上面的示例将在点击按钮后的5秒钟将网页重定向到tutorialspoint.com的官方页面，并且这是由于上面的代码中使用了 setTimeout() 方法与 document.location.href 对象结合使用。

使用 setInterval() 方法

我们还可以使用 setInterval() 方法来延迟网页重定向一段特定的时间间隔。但是，在使用 setInterval() 方法时需要小心，因为它将按照指定的时间间隔重复调用传递给它的函数作为回调函数。我们可以使用 clearInterval() 方法来阻止它重复调用函数。

语法

以下语法将帮助您了解如何使用 setInterval() 方法与 clearInterval() 方法以及 document.location.href 对象结合使用

var interval_name = setInterval(call_back, time_interval);
function call_back() {
   document.location.href = "";
   clearInterval(interval_name);
}

让我们通过一个代码示例来实际理解如何使用setInterval()方法在5秒后重定向页面。

算法

上述示例和本示例的算法几乎相同，只需将前面示例中的setTimeout()方法替换为setInterval()方法并将其存储在一个变量中，然后在setInterval()的回调函数中使用clearInterval()方法并传递给它存储setInterval()方法的变量。

示例

下面的示例将演示如何使用setInterval()方法以及在先前示例算法中需要做出的更改 –

<!DOCTYPE html>
<html>
<body>
   <h2>Using JavaScript to redirect a webpage after 5 seconds</h2>
   <p id="result"></p>
   <button onclick="redirect()">Click to Redirect to Tutorials Point</button>
   <script>
      function redirect () {
         var interval = setInterval(myURL, 5000);
         var result = document.getElementById("result");
         result.innerHTML = "<b> The page will redirect after delay of 5 seconds setInterval() method.";
      }

      function myURL() {
         document.location.href = 'https://www.tutorialspoint.com/index.htm';
         clearInterval(interval);
      }
   </script>
</body>
</html>

在上面的示例中，我们在redirect()函数中使用了setInterval()方法，当用户点击按钮时，该方法将被触发，setInterval()方法会在5秒后调用其回调函数，并将页面重定向到给定的URL（在document.location.href对象中），然后清除间隔，以防止再次调用该函数并重复重定向到同一个页面。

在本教程中，我们已经看到了使用setTimeout()和setInterval()方法与document.location.href对象在5秒后重定向网页的用法。我们通过以代码示例实际实现它们来讨论了这两种方法，以更好地理解它们的工作原理。