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。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
