前端必学 40个精选案例实战 从零吃透HTML5+CSS3+JS
xia讠果☛
lexuecode.com/7488.html
JS中轮循定时器与延时定时器的使用
在JavaScript中，轮询定时器（Polling Timer）和延时定时器（Delayed Timer）是两种常见的异步执行策略。它们都可以用来处理需要在将来某个时间点执行的任务，但它们的工作方式和用途有所不同。
轮询定时器（Polling Timer）
轮询定时器是指在固定的时间间隔内检查某个条件是否满足，如果满足则执行相应的操作。轮询定时器不是真正的定时器，因为它不断地检查而不是等待条件触发。
使用示例：
function isConditionMet() {
// 检查条件是否满足的逻辑
return condition;
}
let intervalId = setInterval(() => {
if (isConditionMet()) {
clearInterval(intervalId); // 条件满足后清除定时器
console.log('条件已满足，执行操作');
}
}, 1000); // 每1000毫秒检查一次
延时定时器（Delayed Timer）
延时定时器，也称为一次性定时器，会在指定的时间后执行一次回调函数。这通常用于需要延迟执行任务的场景。
使用示例：
function doSomethingAfterDelay() {
console.log('延迟执行的操作');
}
setTimeout(doSomethingAfterDelay, 5000); // 5秒后执行doSomethingAfterDelay函数
区别和使用场景
- 轮询定时器：适用于需要重复检查某个条件直到它变为真（或假）的场景。例如，轮询服务器以检查文件是否已上传完成。
- 延时定时器：适用于需要在一段时间后执行一次操作的场景。例如，延迟加载页面元素或在表单提交后显示等待提示。
注意事项
- 性能：轮询定时器可能会消耗更多资源，因为它不断地执行检查操作。如果可能，优先考虑使用延时定时器或其他更高效的异步处理方式。
- 清除定时器：使用
clearInterval和clearTimeout来清除不再需要的定时器，以避免内存泄漏。 - Promise和async/await：对于异步操作，可以考虑使用Promise和async/await语法，它们提供了更现代和简洁的方式来处理异步任务。
在实际开发中，选择哪种定时器取决于具体的应用场景和需求。有时，结合使用Promise和异步处理可以提供更好的解决方案。
前端必学 40个精选案例实战 从零吃透HTML5+CSS3+JS - css导航条实例代码
首先，使用HTML创建导航条的基本结构，通常包括一个元素来包含所有的链接（元素），每个链接内部包含一个``标签[[2]][[6]]。接下来，通过CSS样式来美化和布局导航条。以下是一个简单的示例：
HTML部分：
首页
关于我们
服务
联系我们
CSS部分：
.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.menu li {
float: left;
}
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover {
background-color: #111;
}
在这个例子中，.menu类用于设置无序列表的样式，包括去除默认的列表符号、边距和填充，并且设置背景颜色为深灰色。.menu li用于浮动左侧，使链接水平排列。.menu li a定义了每个链接的样式，包括文本颜色、居中对齐、内边距以及去除默认的下划线。当鼠标悬停在链接上时，.menu li a:hover会改变背景颜色，增加视觉反馈[[7]]。
