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