JS之定时器

一、定时器的常见方法

- setInterval():循环调用。将一段代码,**每隔一段时间**执行一次。(循环执行)

- setTimeout():延时调用。将一段代码,等待一段时间之后**再执行**。(只执行一次)

备注:在实际开发中,二者是可以根据需要,互相替代的。

二、setInterval() 的使用

`setInterval()`:循环调用。将一段代码,**每隔一段时间**执行一次。(循环执行)

**参数**:

- 参数1:回调函数,该函数会每隔一段时间被调用一次。

- 参数2:每次调用的间隔时间,单位是毫秒。

**返回值**:返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**,方便用来清除定时器。

1、定义定时器

**方式一:**匿名函数

每间隔一秒,将 数字 加1:

```javascript
let num = 1;
setInterval(function () {
num ++;
console.log(num);
}, 1000);
```

**方式二:**

每间隔一秒,将 数字 加1:

```javascript
setInterval(fn,1000);

 

function fn(){

var num=0;

num ++;
console.log(num);
}

```

2、清除定时器

定时器的返回值是作为这个定时器的**唯一标识**,可以用来清除定时器。具体方法是:假设定时器setInterval()的返回值是`参数1`,那么`clearInterval(参数1)`就可以清除定时器。

setTimeout()的道理是一样的。

代码举例:

```html
<script>
let num = 1;

const timer = setInterval(function () {
console.log(num); //每间隔一秒,打印一次num的值
num ++;
if(num === 5) { //打印四次之后,就清除定时器
clearInterval(timer);
}

}, 1000);
</script>

```

三、setTimeout() 的使用

`setTimeout()`:延时调用。将一段代码,等待一段时间之后**再执行**。(只执行一次)

**参数**:

- 参数1:回调函数,该函数会每隔一段时间被调用一次。

- 参数2:每次调用的间隔时间,单位是毫秒。

**返回值**:返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**,方便用来清除定时器。

1、定义和清除定时器

代码举例:

```javascript
const timer = setTimeout(function() {
console.log(1); // 3秒之后,再执行这段代码。
}, 3000);

clearTimeout(timer);

```

代码举例:(箭头函数写法)

```javascript
setTimeout(() => {
console.log(1); // 3秒之后,再执行这段代码。
}, 3000);
```


2、setTimeout()举例

5秒后关闭网页两侧的广告栏

假设网页两侧的广告栏为两个img标签,它们的样式为:


```html
<style>
...
...

</style>

```

5秒后关闭广告栏的js代码为:

```html
<script>
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器:5秒后关闭两侧的广告栏
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
</script>
```

上一篇:动画


下一篇:获取setInterval定时器内部函数返回值