Web/04-JavaScript基础/32-定时器.md
2019-11-29 19:33:05 +08:00

140 lines
3.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 定时器的常见方法
- setInterval():循环调用。将一段代码,**每隔一段时间**执行一次。(循环执行)
- setTimeout():延时调用。将一段代码,等待一段时间之后**再执行**。(只执行一次)
备注:在实际开发中,二者是可以根据需要,互相替代的。
## setInterval() 的使用
`setInterval()`:循环调用。将一段代码,**每隔一段时间**执行一次。(循环执行)
**参数**
- 参数1回调函数该函数会每隔一段时间被调用一次。
- 参数2每次调用的间隔时间单位是毫秒。
**返回值**返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**,方便用来清除定时器。
### 定义定时器
**方式一:**匿名函数
每间隔一秒,将 数字 加1
```javascript
let num = 1;
setInterval(function () {
num ++;
console.log(num);
}, 1000);
```
**方式二:**
每间隔一秒,将 数字 加1
```javascript
setInterval(fn,1000);
num ++;
console.log(num);
}
```
### 清除定时器
定时器的返回值是作为这个定时器的**唯一标识**可以用来清除定时器。具体方法是假设定时器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类型的数据。这个数字用来作为定时器的**唯一标识**,方便用来清除定时器。
### 定义和清除定时器
代码举例:
```javascript
const timer = setTimeout(function() {
console.log(1); // 3秒之后再执行这段代码。
}, 3000);
clearTimeout(timer);
```
代码举例:(箭头函数写法)
```javascript
setTimeout(() => {
console.log(1); // 3秒之后再执行这段代码。
}, 3000);
```
### 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>
```