开发者学堂课程【Vue.js 入门与实战：跑马灯效果制作-下】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8133
跑马灯效果制作-下
一、案例：跑马灯停止效果
前一节设置了跑马灯动起来的效果，现在希望它停止，这就需要定时器的功能。
继续 03.跑马灯效果.html 文件的编辑，定义定时器 Id。
如果用：
var intervalId = se tInterval ( () => {……
这时候，lang 方法访问不到这个局部变量。这时候，最好把定时器的ID放到date里。
程序段为：
……
<div id="app">
<input type= "button" value= "浪起来" @click="lang">
input type= "button" value=" 低调" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
var vm = new Vue({
el: '#app'，
data: {
msg: '猥琐发育,别浪~~ ! ',
intervalId: nul1 //在data 上定义定时器Id
},
methods: {
lang() {
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）
}
}
})
……
刷新 Dooument 浏览器页面，可以看到当点击 低调 按钮后，动态的效果立马停止。
其实，这里有个问题，比如点击 浪起来 按钮，开启定时器，那么再点击一次，就又开启了一次定时器。点几次就重复开启几次定时器，这样是不科学的。
一开始，定时器绑定 intervalId: nu11，每当调用 lang()的时候，会返回一个东西给intervalId 保存。当内容复制完毕后不等于 null。
每次调用 lang(),都代表点击按钮开启了定时器按钮。可以在开启之前，先判断intervalId 是否等于 null,如果等于 null，那么字符串是停止的状态，就 可以开启定时器。如果不等于 null，就不能在开启定时器。
在 lang(){}里加入判断代码段:
……
lang(){
if (this.intervalId != nul1) return ;
this.intervalId = setInterval (() => {
……
刷新 Dooument 浏览器页面，看到点击 浪起来 按钮，字符跑起来。点击 低调 按钮，就停止，再次点击 浪起来 按钮，字符仍旧停止不动的。
这里是因为，一开始 intervalId 等于 null，点击 浪起来 按钮，执行 lang()方法，开了一个定时器，给 intervalId 赋 值，这时 intervalId 不等于 null。然后每当点击stop，就会调用 stop 函数，清除定时器。虽然定时器被清除了，但是还未给它重新赋值为 null。intervalId 不等于 null，就不能再重新开启定时器。
重新赋值程序段：
……
}，
stop() { //停止定时器
clearInterval（this.intervalId）
//每当清除了定时器之后，需要重新把intervalId 置为null
this.intervalId = null ;
}
……
刷新 Dooument 浏览器页面，可以看到，点击开启，跑起来，点击停止，就停下，还可以再次点击开启，又跑起来，点击停止，又停下的动作。
