如何使用 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://www.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://www.tutorialspoint.com/index.htm', name = self);
clearInterval(interval);
}
</script>
</body>
</html>
上述示例将在 5 秒后加载同一页面，但这次使用 setInterval() 方法。在此示例中，我们使用了 setInterval() 方法，并在其回调函数内部调用了 clearInterval() 方法，该方法将清除 setInterval()，使其仅调用一次回调函数并仅加载一次网页。
在本教程中，我们借助代码示例了解了 setTimeout() 和 setInterval() 方法的实际实现，以将网页的加载延迟 5 秒。您可以使用任何时间间隔来延迟加载。
