資料結構
網路
關係型資料庫管理系統
作業系統
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.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+ 瀏覽量
