vue中关于定时器的使用总结:
1、定时执行 (setTimeout)在达到时间后只会执行一次,第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔。<template><section><h1>hello world~</h1></section></template><script>export default {d
·
1、定时执行 (setTimeout)
在达到时间后只会执行一次,第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔。
<template>
<section>
<h1>hello world~</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
};
},
methods: {
get() {
this.value ++;
console.log(this.value);
}
},
mounted() {
//一秒后执行一次get方法,打印1
this.timer = setTimeout(this.get, 1000);
},
//销毁定时器,不然会一直存在
beforeDestroy() {
clearTimeout(this.timer);
}
};
</script>
2、循环执行(setInterval)
在一定的时间内一直无限循环执行,直到销毁,用法和setTimeout一样。
<template>
<section>
<h1>hello world~</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 0
};
},
methods: {
get() {
this.value ++;
console.log(this.value);
}
},
mounted() {
//每隔一秒钟就不断的运行get函数,打印1,2,3,4,5,......
this.timer = setInterval(this.get, 1000);
},
//销毁定时器
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
3、定时器的传参问题
传统的方式是不能给定时器传递参数的,比如:
setInterval(this.get(1,2), 1000); //这样并不能将参数(1,2)传递给定时器使用
如要传递参数,下面只介绍一种简单的方法,即直接将方法定义在mounted()中:
<template>
<section>
<h1>{{totle}}</h1>
</section>
</template>
<script>
export default {
data() {
return {
timer: '',
value: 1,
totle:0,
};
},
methods: {
},
mounted() {
//每隔一秒钟就不断的运行add函数,不断打印1+2+3+......的值
this.timer = window.setInterval(function () {
add(0, this.value);
}, 1000);
function add(num,value){
this.totle = num + value;
this.value = this.value+1;
},
//销毁定时器
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>
更多方法参考:setInterval(code, time)中code传递参数办法 - Young Dreamer - 博客园
更多推荐
已为社区贡献3条内容
所有评论(0)