「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」。
在我们平常使用中，经常会用到定时的功能，比如触发事件后隔几秒钟再执行代码，像之前嗑瓜子的文章中，就是使用了两个动画，后一个动画为了将效果显示为前一个动画执行完成后再执行，就是用到了setTimeout()方法进行定时操作。
js 定时器有以下两个方法
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，
直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式
语法参数通常有2个， 一个是要执行的代码，一个是执行代码前的时间间隔，以毫秒计，也就是1000就是1秒
这个是定时器的一个小例子，2秒后通过document元素获取改变div内的内容，可以将它放在函数里面，也可以将代码直接写在setTimeout里面，注意直接放要在外面加引号（双引号不能包裹双引号，不然会抱错）
<div id="content">1</div>
<script>
self.setTimeout("change()",2000);
// self.setTimeout('ch += 1; var s = ch + ""; document.getElementById("content").innerHTML = s;',2000);
function change(){
ch += 1;
var s = ch + ""
document.getElementById("content").innerHTML = s;
}
</script>
上面这段代码如果使用 setTimeout 方法定时，就只会将content中的内容改变一次（ 1 -> 2 ），使用setInterval的话就会每隔2秒改变一次content中的内容
定时器intervalId 方法会每隔指定的毫秒数后重新运行函数，这里是一段应用intervalId方法实现文字滚动前推。点击开始触发定时器，点击中止清除定时器，但再次点击开始会继续中止前的状态滚动，因为我们每次执行函数都有改变msg的内容
<div id="app">
<input type="button" value="开始" @click="start()">
<input type="button" value="中止" @click="stop()">
{{msg}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: '就算大雨让这座城市颠倒，我会给你怀抱',
flag: null //设置定时器
},
methods: {
// 使用 => 箭头函数 this. 会直接指向外部的 this
start() {
this.flag = setInterval(() => {
// 获取第一个字
var start = this.msg.substring(0, 1);
// 获取第一个字后的所有字
var end = this.msg.substring(1);
// 重新给msg赋值，方便下一次循环
this.msg = end + start;
}, 500);
},
stop(){
clearInterval(this.flag); //清除定时器
// 重新设置定时器状态
this.flag = null
}
}
})
</script>
