数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 在 5 秒后加载网页？
在本教程中，我们将学习如何使用 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+ 浏览量
