JavaScript 延遲後重定向頁面
讓我們詳細瞭解如何在 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。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn