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(“方法名或方法”, “延时”); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
实例:解决初始化页面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及实例