資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/index.htm', name = self);
clearInterval(interval);
}
</script>
</body>
</html>
上面的示例將在5秒後加載相同的頁面，但這次使用的是`setInterval()`方法。在此示例中，我們使用了`setInterval()`方法和在其中呼叫的`clearInterval()`方法，它將清除`setInterval()`並使其僅呼叫一次回撥函式，並且僅載入一次網頁。
在本教程中，我們已經看到了`setTimeout()`和`setInterval()`方法的實際實現，它們使用程式碼示例將網頁載入延遲5秒。您可以使用任何您想要延遲載入的時間間隔。
14K+ 瀏覽量
