本文共 2490 字，大约阅读时间需要 8 分钟。

在很多页面中，定时器的身影总比我们想象的多。无论是网页加载后自动跳转，还是轮播图的屏幕自动切换，或者是各种动画的控制，这些都离不开JavaScript中的计时器功能。在JavaScript中，通过设置定时器，我们可以让代码在指定时间段后执行，而不是在函数调用时立即执行。这种灵活性不仅提升了开发效率，也为网页的用户体验增添了更多可能性。

而言，JavaScript中的计时器主要有两种类型：一次性计时器和间隔性触发计时器。这两种类型分别适用于不同的场景。

### 一次性计时器：setTimeout()

setTimeout()?function专门用于创建一次性计时器。它的作用是，在页面加载后，等待指定的延迟时间后，执行指定的代码或调用指定的函数。这种对性计时器非常适用于需要在特定时间执行一次操作的场景。例如，在网页加载后立即弹出欢迎消息，或者在指定的时间后自动刷新页面等。

#### 语法示例：

setTimeout(代码, 延迟时间);

其中，参数说明如下：

1. 代码：要调用的函数或需要执行的代码串-mostastic,

2. 延迟时间：执行代码之前需要等待的时间，单位为毫秒（1秒=1000毫秒）。

#### 示例应用场景：

可以用setTimeout()实现的场景有： 1. 在网页加载后，3秒后弹出欢迎导航。

2. 在用户提交表单后，5秒钟后跳转到感谢页面。

   setTimeout(function(){window.location.href='thankyou.html';},5000);

3. 在图片加载后，优化加载效果（例如显示加载动画）

通过结合图片的loaded事件和setTimeout，可以实现更优化的用户体验。

### 间隔性触发计时器：setInterval()

setInterval()?unction则是用来创建间隔性触发的计时器的。它的工作原理是，在页面加载后，每隔指定的时间间隔就会执行一遍指定的代码或调用指定的函数。这种计时器可以用来实现持续不断的动画、定时刷新页面内容、或者监测系统性能等场景。

#### 语法示例：

setInterval(代码, 交互时间);

其中，参数说明如下：

1. 代码：要调用的函数或需要执行的代码串。

2. 交互时间：代码执行之间的间隔时间，单位为毫秒（1秒=1000毫秒）。

#### 示例应用场景：

可以用setInterval()实现的场景有： 1. 实时更新股价 ticker（例如在网页的顶部显示实时股价）。

setInterval(function(){window.open('http://www.google.com/finance/quote/<.NAME>/Q=
TIC', '_blank');}, 30000);
2. 实施无限动画（例如多个物体的无限循环动画）。

这样做会使页面性能大大降低，因此需要谨慎使用!

3. 长时间数据监控（例如监测服务器状态、检测浏览器性能指标等）。

需要注意的是，在开发实践中，一定要结合实际需求。setInterval()虽然灵活，但如果在网页中频繁调用，可能会导致页面性能问题。因此在使用时应谨慎评估，确保在不影响用户体验的情况下使用。

### 取消计时器：clearInterval()

在实际开发过程中，有时候可能需要提前停止已经运行的计时器。例如，在用户离开页面或者完成某项操作时，可能需要停止已经设置的计时器，以避免占用不必要的资源或者防止潜在的问题。clearInterval()?unction正是用来实现这一点的。

#### 语法示例：

clearInterval(定时器名);

其中，定时器名是setInterval？unction设置时返回的唯一标识符。为了使用clearInterval(), 需要在setInterval()中将该标识标记清楚。

例如，在函数中这样使用：

var timer=null; 函数 play() { timer = setInterval(function() { // 实现具体逻辑 }, 2000); } 函数 stopPlay() { clearInterval(timer); // 停止计时器 }

箭头函数简化了代码书写，但原理是一样的。通过将timer变量保存下来，可以在任意需要时取消已经设置的计时器。与之对应的，在需要时，可以通过clearInterval(timer)来销毁计时器。这样就能确保计时器不被遗漏，避免潜在的资源泄漏问题。

### 自定义计时器示例

在实际应用中，计时器常用于控制界面元素的动画或交互逻辑。例如，可以通过计时器实现类似滑动门效应或者轮播图的自动切换。

假设我们想在网页分添加一个自动翻转图片的轮播功能。我们可以这样实现：

代码如下：

var slideIndex = 0; var currentImage = Array.from(document.images); var timer=null;

function showSlide() { console.log('当前显示第' + (slideIndex + 1) + '张图片'); if (slideIndex < currentImage.length -1) { slideIndex++; } } timer = setInterval(showSlide, 3000);

此外一些与用户交互的事件，比如鼠标移动或离开，可以用来控制计时器的运行状态，从而实现更直观的用户体验。例如，可以在某些动作触发时暂停计时器，而另一些动作触发时重新启动它。

回想起来，这样的技巧在日常开发中非常实用。它可以帮助我们在网页中创建更加丰富、可及时的动态效果。只要合理地使用计时器，就能让普通的网页变得更加有趣和智能活跃。谁知道呢，或许未来随着技术的不断进步，网页的功能会变得更加强大，而计时器的作用也会更加突出。