HOWTO · JavaScript
JavaScript 延遲後重定向頁面
本教程展示瞭如何使用 JavaScript 中的 setTimeout 方法在延遲後重定向頁面。
本頁內容
讓我們詳細瞭解如何在 JavaScript 延遲後重定向到另一個頁面。
在 JavaScript 中使用 setTimeout() 方法在延遲後重定向頁面
你有時希望在使用者單擊連結後在網頁上顯示一些內容，例如簡訊，然後再將使用者重定向到另一個頁面。錨標籤是不能直接延遲重定向幾秒鐘然後轉到另一個頁面的。
為此，我們必須使用 setTimeout 方法。此方法新增延遲，然後將使用者重定向到另一個頁面。
但是僅僅使用 setTimeout 方法是行不通的。在使用 setTimeout 方法之前，你還必須阻止錨標記的預設行為。
JavaScript 中的 setTimeout() 方法允許你在一段時間後執行一段程式碼或一個函式。setTimeout() 函式有兩個引數。
第一個引數是回撥函式，第二個引數是要延遲程式碼執行的時間。
為了實現這一點，我們將首先建立兩個網頁，index.html 和 newpage.html。在 index.html 中，我們有一個標題文字的 h1 標籤。
然後我們將有一個錨標籤 a，它具有 link 和 href 屬性的 id。
錨連結的 href 將是 # 並且不會指向任何地方。我們將在 JavaScript 中設定 href 連結。
錨標記也將包含文字重定向我。最後，我們將使用 script 標籤連結 JavaScript 檔案，如下所示。
// index.html
<body>
<h1>Home Page</h1>
<a id="link" href="#">Redirect me</a>
<script src="./script.js">
</script>
</body>
在 newpage.html 中，我們將有一個 h1 文字，如下所示。我們的目標是在點選錨連結後將使用者從 index.html 頁面重定向到 newpage.html。
// newpage.html
<body>
<h1>Welcome to new page...</h1>
</body>
設定好我們的 HTML 程式碼之後，就該處理 JavaScript 程式碼了。我們將首先使用其 id 屬性 link 在 JavaScript 中獲取錨 HTML 元素，並將其儲存在 url 變數中。
然後我們將使用 addEventListener() 方法在 url 變數上設定點選監聽器。
在 click 事件監聽器中，我們將首先在控制檯上列印一條訊息 url clicked...。這會讓我們知道使用者點選了連結。
然後我們將新增一個 setTimeout() 方法。
我們將在 3000 毫秒後執行該函式，即 3 秒後。我們將使用 window.location.href 屬性在此方法中設定 URL。
成功重定向到新頁面後，我們將在控制檯上列印一條訊息。
var url = document.getElementById('link');
url.addEventListener('click', () => {
console.log('url clicked...')
setTimeout(() => {
window.location.href = 'http://127.0.0.1:5500/newpage.html';
console.log('timeout executed...')
}, 3000);
});
整個事情都在事件迴圈上工作。
setTimeout() 方法之前和之後的任何程式碼都將首先執行。完成程式碼執行後，它將開始執行 setTimeout 或 setInterval 方法。
要了解上述程式碼在內部是如何工作的，你必須瞭解 JavaScript 中的事件迴圈概念。
此時，如果你執行上面的程式碼，它現在就可以工作了。只要你單擊該 URL，它就會立即將你重定向到我們不想要的下一頁。
即使我們新增了 setTimeout() 方法，它也會立即切換到該連結而不會延遲。這是因為，預設情況下，每個 HTML 元素都有一些預設行為。
它的預設行為是單擊錨連結後轉到下一頁。
在 JavaScript 中使用 preventDefault() 方法禁用 HTML 元素的預設行為
有時我們必須禁用 HTML 元素的這些預設行為。我們使用一種名為 preventDefault() 的方法來實現。
你必須將事件作為引數傳遞給你呼叫的函式。在這種情況下，我們將事件 e 傳遞給 click 事件，然後在該事件上，我們設定 preventDefault() 方法。
var url = document.getElementById('link');
url.addEventListener('click', (e) => {
e.preventDefault();
console.log('url clicked...')
setTimeout(() => {
window.location.href = 'http://127.0.0.1:5500/newpage.html';
console.log('timeout executed...')
}, 5000);
});
如果你執行程式碼並單擊連結，它將在 setTimeout() 方法中提到的時間延遲後將你帶到下一頁。
要在新標籤頁中開啟 URL，你可以使用 window.open() 方法而不是 window.location.href()。在 window.open() 的第一個引數中，你可以傳遞 URL，在第二個引數中，你必須指定要開啟連結的位置。
由於我們想在新標籤頁中開啟延遲，我們將 _blank 傳遞給第二個引數。
window.open('http://127.0.0.1:5500/newpage.html', '_blank');
如果你執行程式碼，它將在新標籤頁中開啟 URL。
