js에는 두 가지 유형의 타이머가 있습니다. 하나는 setInterval을 주기적으로 실행하는 것이고 다른 하나는 setTimeout을 주기적으로 실행하는 것입니다.
- 루프 실행 (setInterval)
루프 실행은 시간 간격을 설정하는 것입니다.이 메서드는 타이머가 소멸 될 때까지 매번 실행됩니다.
사용법은 setInterval ( "메서드 이름 또는 메서드", "지연")이고, 첫 번째 매개 변수는 메서드 이름 또는 메서드입니다. 메소드 이름 일 때 괄호를 추가하지 않도록주의하십시오. 두 번째 매개 변수는 시간 간격입니다.
예 : dayjs와 협력하여 시계 기능 구현 및 실시간 표시
<template>
<div id="app">
{
{
this.datetime}}
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
timer: '',
datetime: ''
}
},
mounted() {
/* 每秒定时刷新 */
this.timer = setInterval(() => {
this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
console.log(this.datetime)
}, 1000)
},
beforeDestroy() {
/* 离开页面前销毁定时器 */
if(this.timer){
clearInterval(this.timer);
}
}
};
</script>
<style lang="less" scoped>
</style>
vue 使用 dayjs ：https://blog.csdn.net/weixin_42201180/article/details/107832001
- 시간 제한 실행 (setTimeout)
setTimeout의 타이밍 실행은 시간을 설정하는 것으로, 대기 시간에 도달했을 때 한 번만 실행되지만 실행 후에도 타이머는 여전히 남아 있지만 실행 중이 아닙니다.
사용법은 setTimeout ( "method name or method", "delay")입니다. 첫 번째 매개 변수는 메소드 이름 또는 메소드입니다. 메소드 이름 인 경우 괄호를 추가하지 마십시오. 두 번째 매개 변수는 시간 간격입니다.
예 : 초기화 페이지에서 echarts 렌더링 오류 문제 해결
<template>
<div id="app">
延时渲染chart
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
timer: '',
}
},
mounted() {
/* 延时渲染chart */
this.timer = setTimeout(() => {
this.initEchart()
}, 0)
},
methods: {
initEchart(){
// 此处chart代码省略
...
}
},
beforeDestroy() {
/* 离开页面前销毁定时器 */
if (this.timer) {
clearTimeout(this.timer);
}
}
};
</script>
<style lang="less" scoped>
</style>
Vue는 echarts를 사용합니다. 참조 : Vue는 echarts 및 예제를 소개합니다.