vue中定时器的开启及关闭

今天在写一个滚动图片的功能,功能是这样的,页面加载后直接开始滚动,鼠标悬停停止滚动,鼠标离开再开始滚动。

原理很简单,就是弄个定时器让元素.scrollLeft不断增加，鼠标移入时清除定时器，鼠标移除恢复定时器。

但是在vue中就出现了一个小问题，在组件上使用@mouseenter="startRoll",@mouseLeave="stopRoll"

然后在methods中写好这两个function

页面mounted后starRoll

那么这个小问题来了,定时器写在哪呢?startRoll里的定时器在stopRoll中并无法停止。

解决方法：

将定时器声明在data内：

先在data内设置一个 timer：null；

在startRoll中： this.timer=setInterval(function(){},20)

在stopRoll中: clearInterval(this.timer);

问题解决!

有点啰嗦,请指教