Hay dos tipos de temporizadores en js, uno es para ejecutar setInterval cíclicamente y el otro es para ejecutar setTimeout periódicamente
- Ejecución de bucle (setInterval)
La ejecución del bucle es establecer un intervalo de tiempo. Este método se ejecutará cada vez hasta que se destruya el temporizador. El
uso es setInterval ("nombre del método o método", "retraso"), el primer parámetro es el nombre del método o Método, sea cuidado de no agregar paréntesis cuando es el nombre del método, el segundo parámetro es el intervalo de tiempo
Ejemplo: coopere con dayjs para realizar la función del reloj y mostrar el tiempo en tiempo real
<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
- Ejecución programada (setTimeout)
La ejecución del tiempo de setTimeout es establecer un tiempo, solo se ejecuta una vez cuando se alcanza el tiempo de espera, pero el temporizador sigue ahí después de la ejecución, pero no se está ejecutando
El uso es setTimeout ("nombre del método o método", "retraso"); el primer parámetro es el nombre del método o el método, no agregue paréntesis cuando es el nombre del método, y el segundo parámetro es el intervalo de tiempo
Ejemplo: resuelva el problema del error de representación de echarts en la página de inicialización
<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 usa echarts, consulte: Vue presenta echarts y ejemplos