vue.js 中如何使用定时器? 下面本篇文章给大家介绍一下 vue 中使用定时器 setInterval 和 setTimeout. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue 中使用定时器 setInterval 和 setTimeout
JS 中定时器有两种, 一个是循环执行 setInterval, 另一个是定时执行 setTimeout
一, 循环执行 (setInterval)
顾名思义, 循环执行就是设置一个时间间隔, 每过一段时间都会执行一次这个方法, 直到这个定时器被销毁掉
用法是 setInterval("方法名或方法","延时"), 第一个参数为方法名或者方法, 注意为方法名的时候不要加括号, 第二个参数为时间间隔
- <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() {
- this.timer = setInterval(this.get, 1000);
- },
- beforeDestroy() {
- clearInterval(this.timer);
- }
- };
- </script>
上面的例子就是页面初始化的时候创建了一个定时器 setInterval, 时间间隔为 1 秒, 每一秒都会调用一次函数 get, 从而使 value 的值加一.
二, 定时执行 (setTimeout)
定时执行 setTimeout 是设置一个时间, 等待时间到达的时候只执行一次, 但是执行完以后定时器还在, 只是没有运行
用法是 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() {
- this.timer = setTimeout(this.get, 1000);
- },
- beforeDestroy() {
- clearTimeout(this.timer);
- }
- };
- </script>
上面是页面初始化时候创建一个定时器 setTimeout, 只在 1 秒后执行一次方法.
定时器需要在页面销毁的时候清除掉, 不然会一直存在!!!
嗯, 就酱~~
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17499.html