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秒后执行一次方法。
定时器需要在页面销毁的时候清除掉,不然会一直存在!!!
嗯,就酱~~
Vue中使用定时器setInterval和setTimeout的更多相关文章
- Jquery中使用定时器setInterval和setTimeout
直接在ready中调用其他方法,会提示缺少对象的错误,解决方法如下: 方法1. 函数不在$(function(){....})内,setInterval第一个参数为"showAtuto&qu ...
- js定时器setInterval()与setTimeout()
js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- 定时器( setInterval和 setTimeout)
一.定时器setInterval-------常用的,反复循环的 <input type="button" value="停止" id="btn ...
- vue中清除定时器
1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...
- setInterval 和 setTimeout 定时器
前端定时器 setInterval 和 setTimeout setInterval 循环执行 循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉. 用法是setI ...
- vue 项目中,定时器(setInterval)的写法
vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
随机推荐
- jquery遍历DOM方法总结
1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...
- Cocos2dx报OpenGL error 0x0506错误
近期做第三方sdk接入时,发现iOS8系统下,进行银联充值后,返回游戏有很大几率会报 OpenGL error 0x0506............ 之类的绘制问题,游戏卡死,花了很长时间,一直没有头 ...
- Sklearn 中的 CrossValidation 交叉验证
1. 交叉验证概述 进行模型验证的一个重要目的是要选出一个最合适的模型,对于监督学习而言,我们希望模型对于未知数据的泛化能力强,所以就需要模型验证这一过程来体现不同的模型对于未知数据的表现效果. 最先 ...
- Redis之Hash数据结构
0.前言 redis是KV型的内存数据库, 数据库存储的核心就是Hash表, 我们执行select命令选择一个存储的db之后, 所有的操作都是以hash表为基础的, 下面会分析下redis的hash数 ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- Atitit.数据库存储引擎的原理与attilax 总结
Atitit.数据库存储引擎的原理与attilax 总结 1. 存储引擎是什么1 2. 其它数据库系统(包括大多数商业选择)仅支持一种类型的数据存储2 3. 表的存储有三个文件:结构+数据+索引2 4 ...
- ps -aux --sort -rss |head 列出进程拿物理内存占用排序 使用ps aux 查看系统进程时,第六列即 RSS列显示的就是进程使用的物理内存。
ps -a Select all processes -u userlist Select by effective user ID (EUID) or name. ...
- springmvc 环境配置图
- TBSchedule源码阅读2-TBScheduleManagerFactory 定时任务ManagerFactoryTimerTask
定时任务 : 主要功能:监听zookeeper状态,正常则this.factory.refresh(),异常则this.factory.reStart(); 1 正常情况this.factory.re ...
- ps -ef | grep java 查看所有关于java的进程
ps -ef | grep java 查看所有关于java的进程