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。
相关文章
在 JavaScript 中 use strict
发布时间：2024/03/20 浏览次数：56 分类：JavaScript
-
在本文中，学习 JavaScript 中的 use strict 特性。我们将通过不同的示例了解如何在 JavaScript 代码语句中创建和执行 use strict 关键字。
在 JavaScript 中更改输入值
发布时间：2024/03/20 浏览次数：69 分类：JavaScript
-
我们可以使用 JavaScript 中的 value 属性或 setAttribute() 函数更改输入值。
JavaScript 清除输入
发布时间：2024/03/20 浏览次数：125 分类：JavaScript
-
输入字段可以重置或与空值相关联。onfocus 属性可以触发一个函数，起到清除输入的作用。此外，使用 value 属性获取输入条目和清除输入的 reset 方法非常容易掌握。
在 JavaScript 中验证表单输入中的数字
发布时间：2024/03/20 浏览次数：147 分类：JavaScript
-
本文将教你如何在 JavaScript 中验证数字。我们将使用正则表达式和 JavaScript 函数，包括 isNaN、parseFloat 和 isFinite。
