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及实例
