标签：最好 ring 速度 oct tin substr 包含 直接 new
通过以下案例的练习，可以掌握：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id=‘app‘>
<input type="button" value="开始" v-on:click="go" />
<input type="button" value="结束" @click="stop" />
<h3>{{msg}}</h3>
</div>
<script>
const vm = new Vue({
el: "#app",
data:{
msg: "我拿BUFF，谢谢！",
intervalId: null //d定时器的ID，默认等于null
},
methods:{
go: function(){ //开始跑马灯效果
//思路：先截去第一个字符，然后吧这个字符放到结尾
// this.msg.substring(起始的索引，结束的索引[不包含结束的索引])
//每次开启定时器前先清除定时器，防止多次点击后只有最后一次点击的定时器ID被保存，
//但是这也会偶问题，当点击速度足够快的时候，一直在清理，跑马灯根本不动
// clearInterval(this.intervalId);
//如果定时器的ID不等于NULL就表示已经有定时器在执行了，此时直接退出这样就不会开启第二个定时器了
if(this.intervalId !== null)return
this.intervalId = setInterval(()=>{
const header = this.msg.substring(0,1);
const body = this.msg.substring(1,);
this.msg = body + header;
},300)
},
stop: function(){ //结束跑马灯效果
clearInterval(this.intervalId);
//每当清除定时器之后，为了保证下次能偶正常开启定时器，所以需要把intervalId重置为null
this.intervalId = null;
}
}
})
</script>
</body>
</html>
标签：最好 ring 速度 oct tin substr 包含 直接 new
原文地址：https://www.cnblogs.com/lqmchn/p/13098631.html
