Vue(echarts)中使用定时器setInterval和setTimeout
js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout循环执行(setInterval)用法是setInterval(“方法名或方法”,“延时的时间”), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔<template><section><h1>hello world~</h1>
·
js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout
循环执行(setInterval)
用法是setInterval(“方法名或方法”,“延时的时间”), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
<template>
<section>
<h1>setInterval</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0,
arrInfo:[
{
key: '0',
title: '标题1'
},
{
key: '1',
title: '标题2'
},
]
};
},
methods: {
arrInfoGet() {
// this.value ++;
if(this.arrInfo.length == this.value ) { // 如果长度相等 则复原到 1
this.value = '1';
} else {
this.value ++;
}
this.massData(this.value); // 此处是调用接口数据重新渲染echarts
console.log(this.value);
}
},
mounted() {
this.timer = setInterval(this.arrInfoGet, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
上面的例子就是页面初始化的时候创建了一个定时器setInterval,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。
定时执行 (setTimeout)
用法是setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔
<template>
<section>
<h1>setTimeout</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
};
},
methods: {
arrInfoGet() {
this.value ++;
console.log(this.value);
}
},
mounted() {
this.timer = setTimeout(this.arrInfoGet, 3000);
},
beforeDestroy() {
clearTimeout(this.timer);
}
};
</script>
上面是页面初始化时候创建一个定时器setTimeout,只在1秒后执行一次方法。
定时器需要在页面销毁的时候清除掉,不然会一直存在!!!
更多推荐
已为社区贡献5条内容
所有评论(0)