vue定时器 setInterval 应用
2019-11-21 本文已影响0人
杨康他兄弟
定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js" ></script>
<title>定时器</title>
</head>
<body>
<div id = "app">
<h1 v-text="msg"></h1>
<input type="button" value="开始" @click="lamp"/>
<input type="button" value="停止" @click="stop"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'fuck world !',
intervalId:null
},
methods:{
lamp(){
if(this.intervalId != null){
//如果intervalId 不为空，说明还未点击停止按钮，此时不进行定时器操作
return
}
this.intervalId = setInterval(()=>{
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start},
400)
},
stop(){
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
</body>
</html>
