当前位置:首页 >> 你懂你先说>>正文

vue中定时器的开启及关闭

栏目:你懂你先说时间:2018-11-08热度:
本文标签: 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);

问题解决!

有点啰嗦,请指教

热门标签