提交 d15b8db1 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

docs: api/timer 页面补充最佳实践,提示及时销毁

上级 1e9bcd90
# 定时器
## setTimeout(callback, delay, rest)
设定一个定时器。在定时到期以后执行注册的回调函数
......@@ -10,7 +12,6 @@
|delay|Number|否|延迟的时间,函数的调用会在该延迟之后发生,单位 ms|
|rest|Any|否|param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数|
**返回值**
|返回值|类型|说明|
......@@ -27,8 +28,41 @@
|:-|:-|:-|:-|
|timeoutID|Number|是|要取消的定时器的 ID|
### 最佳实践
定时器应当在组件、页面销毁时候取消,否则该定时器将成为游离定时器,无法被回收销毁。
```html
<script lang="ts">
let timer: ReturnType<typeof setTimeout> | null = null;
export default {
data() {
return {};
},
methods: {
onSetTimeout() {
timer = setTimeout(() => {
console.log("setTimeout");
}, 1000);
},
clearTimer() {
// clearTime
if (timer) {
clearTimeout(timer);
timer = null;
}
},
},
beforeUnmount() {
// clearTime
this.clearTimer();
},
};
</script>
```
## setInterval(callback, delay, rest)
设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数
**参数说明**
......@@ -39,7 +73,6 @@
|delay|Number|否|执行回调函数之间的时间间隔,单位 ms|
|rest|Any|否|param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数|
**返回值**
|返回值|类型|说明|
......@@ -47,9 +80,10 @@
|intervalID|Number|定时器的编号,这个值可以传递给 [clearInterval](/api/timer?id=clearinterval) 来取消该定时|
**代码示例**
```
```js
this.timer = setInterval(() => {
//TODO
//TODO
}, 1000);
```
......@@ -63,5 +97,38 @@ this.timer = setInterval(() => {
|:-|:-|:-|:-|
|intervalID|Number|是|要取消的定时器的 ID|
### 最佳实践
```html
<script lang="ts">
let timer: ReturnType<typeof setTimeout> | null = null;
export default {
data() {
return {};
},
methods: {
onSetTimeout() {
timer = setInterval(() => {
console.log("setInterval");
}, 1000);
},
clearTimer() {
// clearTime
if (timer) {
clearInterval(timer);
timer = null;
}
},
},
beforeUnmount() {
// clearTime
this.clearTimer();
},
};
</script>
```
## 注意事项
* App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
\ No newline at end of file
- App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
- 定时器执行间隔并不等于定时器间隔,受很多因素影响,这属于 JS 执行问题,详见 [MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册