数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在5秒后使用JavaScript加载网页？
在本教程中，我们将学习如何使用JavaScript在5秒后加载网页。我们使用JavaScript中的`setTimeout()`函数在一段时间后加载网页。此函数等待几秒钟，然后加载网页。我们也可以使用`setInterval()`方法来执行我们的任务。
通常，如果用户连接的网络连接非常强，则网页会立即加载；如果网络连接非常差，则加载需要一些时间。但是，您是否知道我们可以使用JavaScript手动停止网页加载一段时间并延迟其加载时间，并根据需要延迟加载时间？
我们可以使用JavaScript的以下内置方法在5秒后加载网页：
`setTimeout()` 方法
`setInterval()` 方法
让我们逐一详细讨论这两种方法并提供代码示例。
使用`setTimeout()`方法
`setTimeout()`方法用于在分配给它的特定时间后调用一次函数。它接受一个回调函数作为参数和以毫秒为单位的时间限制，之后它只调用一次该回调函数并显示函数的内容。
语法
以下语法用于实现`setTimeout()`方法，以在特定时间延迟任何代码块：
setTimeout(callBack_method, timeInMilliSeconds);
让我们了解`setTimeout()`方法在延迟5秒后加载网页的实际实现。
算法
**步骤1** - 在第一步中，我们将为按钮的onclick事件定义一个函数，其中包含`setTimeout()`方法。
**步骤2** - 在下一步中，我们将使用回调函数和调用函数的时间间隔来调用`setTimeout()`方法。
**步骤3** - 在这一步中，我们将为`setTimeout()`方法定义回调函数，该函数包含必须在时间间隔后加载的网页的链接。
示例
下面的示例将说明我们如何使用`setTimeout()`方法将网页加载时间延迟5秒：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to load a webpage after 5 seconds</h2>
<p id = "result"></p>
<button onclick = "load()">click to load</button>
<script>
function load() {
setTimeout(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = `The page will load after delay of 5 seconds using setTimeout() method.`;
}
function myURL() {
window.open('https://tutorialspoint.com/index.htm', name = self);
}
</script>
</body>
</html>
在上面的示例中，我们使用了`setTimeout()`方法将网页加载延迟5秒，其中我们将`myURL()`函数作为回调函数传递给它，该函数包含使用`window.open("pageAddress")`对象在5秒后打开的网页链接，它将在延迟5秒后加载tutorialspoint官方网页。
使用`setInterval()`方法
`setInterval()`方法也用于在给定时间的延迟后调用回调函数。但与`setTimeout()`不同的是，`setInterval()`将在给定时间间隔后重复调用传递的函数，我们需要在它调用函数一次后停止它，以便它不能使用`clearInterval()`方法在5秒后重复加载网页。`setInterval()`和`clearInterval()`的使用语法如下所示。
语法
以下语法通常用于实现`setInterval()`和`clearInterval()`方法：
var intervalName = setInterval(callBack_function, time_interval); clearInterval(intervalName);
让我们实际了解如何使用`setInterval()`和`clearInterval()`方法将网页加载延迟5秒。
算法
此示例的算法与上述示例几乎相同。您只需要执行以下一些小的更改：
将`setTimeout()`替换为`setInterval()`，并将其存储在一个变量中，如下所示：
var intervalName = setInterval(callBack_function, time_interval);
在`setInterval()`方法的回调函数内使用`clearInterval()`方法以及存储`setInterval()`的变量。
示例
下面的示例将解释您必须进行的更改，并帮助您理解算法：
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to load a webpage after 5 seconds</h2>
<p id = "result"></p>
<button onclick = "load()">click to load</button>
<script>
function load() {
var interval = setInterval(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will load after delay of 5 seconds using setInterval() method.";
}
function myURL() {
window.open('https://tutorialspoint.com/index.htm', name = self);
clearInterval(interval);
}
</script>
</body>
</html>
上面的示例将在5秒后加载相同的页面，但这次使用的是`setInterval()`方法。在此示例中，我们使用了`setInterval()`方法和在其中调用的`clearInterval()`方法，它将清除`setInterval()`并使其仅调用一次回调函数，并且仅加载一次网页。
在本教程中，我们已经看到了`setTimeout()`和`setInterval()`方法的实际实现，它们使用代码示例将网页加载延迟5秒。您可以使用任何您想要延迟加载的时间间隔。
14K+ 浏览量
