js定时器,JavaScript定时器概述

JavaScript中的定时器功能主要由`setTimeout`和`setInterval`两个函数提供。这两个函数允许你安排代码在特定的延迟后执行，或者以固定的时间间隔重复执行。

1. `setTimeout`: 这个函数会在指定的延迟（以毫秒为单位）后执行一次指定的函数。例如，`setTimeout { console.log; }, 1000qwe2;`会在一秒后输出Hello, world!。

2. `setInterval`: 这个函数会按照指定的延迟（以毫秒为单位）重复执行指定的函数。例如，`setInterval { console.log; }, 1000qwe2;`会每隔一秒输出Tick。

你还可以使用`clearTimeout`和`clearInterval`来取消尚未执行的`setTimeout`或`setInterval`。

例如：

```javascript

let timeoutId = setTimeout {

console.log;

}, 2000qwe2;

// To cancel the timeout before it executes

clearTimeout;

```

或者：

```javascript

let intervalId = setInterval {

console.log;

}, 1000qwe2;

// To stop the interval from executing

clearInterval;

```

这两个函数在Web开发中非常有用，可以用于创建动画、轮播图、倒计时等多种效果。你有没有想过，在浏览网页的时候，那些自动播放的图片轮播，或者是那些定时跳出的广告，它们是怎么做到的呢？没错，就是靠我们今天要聊的主角——JavaScript定时器！别小看了这个小小的定时器，它可是网页动起来的关键呢！

定时器的魔法：让网页动起来

想象你正在逛一个网站，突然，一张图片缓缓地出现在你的眼前，然后又慢慢地消失，紧接着下一张又出现了。这个过程是不是很神奇？其实，这就是定时器在背后默默工作的结果。它就像一个时间的小管家，帮你精确地控制着网页上的各种动态效果。

定时器的双胞胎：setTimeout和setInterval

在JavaScript的世界里，定时器主要有两个双胞胎兄弟：setTimeout和setInterval。

- setTimeout：这个兄弟有点儿像“一次性任务执行者”。你给它一个任务，它会在指定的时间后执行这个任务，然后任务就结束了。就像你约朋友吃饭，你告诉他10分钟后到，10分钟后他来了，吃完饭就各自回家了。

- setInterval：这个兄弟则是个“循环任务执行者”。你给它一个任务，它会每隔一段时间就执行这个任务，直到你告诉它停止。就像你每天早上7点都要起床跑步，直到你有一天决定休息。

setTimeout的用法：一次性任务执行

想要使用setTimeout，你只需要调用它，并给它传递两个参数：一个是你要执行的函数，另一个是延迟时间（单位是毫秒）。

```javascript

setTimeout(function() {

console.log('2秒后我会出现！');

}, 2000);

上面的代码会在2秒后打印出“2秒后我会出现！”。是不是很简单？

setInterval的用法：循环任务执行

使用setInterval的用法和setTimeout差不多，也是传递两个参数：一个是你要执行的函数，另一个是延迟时间。

```javascript

setInterval(function() {

console.log('每秒我都会出现！');

}, 1000);

上面的代码会在每秒打印出“每秒我都会出现！”。不过要注意，一旦你开始使用setInterval，它就会一直执行，直到你用clearInterval来停止它。

定时器的清理：clearTimeout和clearInterval

使用定时器的时候，我们有时候需要取消已经设置的定时器。这时候，就需要用到clearTimeout和clearInterval这两个清理工具。

- clearTimeout：用来取消setTimeout设置的定时器。

```javascript

var timer = setTimeout(function() {

console.log('我会在2秒后出现！');

}, 2000);

// 1秒后取消定时器

clearTimeout(timer);

- clearInterval：用来取消setInterval设置的定时器。

```javascript

var timer = setInterval(function() {

console.log('每秒我都会出现！');

}, 1000);

// 2秒后取消定时器

clearInterval(timer);

定时器的应用：让网页更生动

定时器在网页中的应用非常广泛，比如：

- 图片轮播：通过定时器控制图片的切换，实现轮播效果。

- 倒计时：在限时抢购活动中，通过定时器实现倒计时功能。

- 自动刷新：在股票信息页面，通过定时器实现数据的自动刷新。

JavaScript定时器就像是一个魔法师，它可以让你的网页变得更加生动有趣。掌握了这个魔法，你就可以在网页的世界里尽情施展你的创意了！