🐛 Fixing a bug.

Use the mouse fast and frequent moving in and out single step. Lead to failure of waitTime 鼠标快速频繁进出单步滚动，导致单步等待时间变短设置失效
chenxuan0000 · Feb 3, 2018 · 263dc63 · 263dc63
1 parent 89d1630
commit 263dc63
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 17 deletions.
diff --git a/dist/vue-seamless-scroll.js b/dist/vue-seamless-scroll.js
@@ -217,6 +217,7 @@ exports.default = {
       delay: 0,
       copyHtml: '',
       reqFrame: null,
+      singleWaitTime: null,
       isHover: false };
   },
 
@@ -333,6 +334,7 @@ exports.default = {
     enter: function enter() {
       if (this.hoverStop) return;
       this.isHover = true;
+      if (this.singleWaitTime) clearTimeout(this.singleWaitTime);
       this._cancle();
     },
     leave: function leave() {
@@ -363,20 +365,18 @@ exports.default = {
           if (this.xPos >= 0) this.xPos = w * -1;
           this.xPos += this.options.step;
         }
-        var timer = void 0;
+        if (this.singleWaitTime) clearTimeout(this.singleWaitTime);
         if (!!this.options.singleHeight) {
           if (Math.abs(this.yPos) % this.options.singleHeight === 0) {
-            if (timer) clearTimeout(timer);
-            timer = setTimeout(function () {
+            this.singleWaitTime = setTimeout(function () {
               _this3._move();
             }, this.options.waitTime);
           } else {
             this._move();
           }
         } else if (!!this.options.singleWidth) {
           if (Math.abs(this.xPos) % this.options.singleWidth === 0) {
-            if (timer) clearTimeout(timer);
-            timer = setTimeout(function () {
+            this.singleWaitTime = setTimeout(function () {
               _this3._move();
             }, this.options.waitTime);
           } else {

diff --git a/dist/vue-seamless-scroll.min.js b/dist/vue-seamless-scroll.min.js
diff --git a/examples-src/components/router-two.vue b/examples-src/components/router-two.vue
@@ -24,7 +24,7 @@
                 <div class="options" style="color:#357edd;">
                     <p><b>demo5</b> 向上无缝滚动,单条停止一段时间</p>
                     var option = {<br/>
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step: 0.5,<br/>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step: 1,<br/>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 5<br/>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;singleHeight: 30,<br/>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;waitTime: 1000<br/>
@@ -114,7 +114,7 @@
       },
       classOption4 () {
         return {
-          step: 0.5,
+          step: 1,
           limitMoveNum: 5,
           singleHeight: 30,
           waitTime: 1000

diff --git a/examples/examples.bundle.js b/examples/examples.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-seamless-scroll",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A simple, Seamless scrolling for Vue.js",
   "main": "dist/vue-seamless-scroll.min.js",
   "scripts": {

diff --git a/src/components/myClass.vue b/src/components/myClass.vue
@@ -20,7 +20,8 @@
         yPos: 0,
         delay: 0,
         copyHtml: '',
-        reqFrame: null,
+        reqFrame: null, // move动画的animationFrame定时器
+        singleWaitTime: null, // single 单步滚动的定时器
         isHover: false // mouseenter mouseleave 控制this._move()的开关
       }
     },
@@ -135,6 +136,8 @@
       enter () {
         if (this.hoverStop) return
         this.isHover = true //关闭_move
+        // 防止蛋疼的人频频hover进出单步滚动 导致定时器乱掉
+        if (this.singleWaitTime) clearTimeout(this.singleWaitTime)
         this._cancle()
       },
       leave () {
@@ -143,6 +146,7 @@
         this._move()
       },
       _move () {
+        // 鼠标移入时拦截_move()
         if (this.isHover) return
         this._cancle() //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
         this.reqFrame = requestAnimationFrame(
@@ -164,20 +168,18 @@
               if (this.xPos >= 0) this.xPos = w * -1
               this.xPos += this.options.step
             }
-            let timer
+            if (this.singleWaitTime) clearTimeout(this.singleWaitTime)
             if (!!this.options.singleHeight) { //是否启动了单行暂停配置
               if (Math.abs(this.yPos) % this.options.singleHeight === 0) { // 符合条件暂停waitTime
-                if (timer) clearTimeout(timer)
-                timer = setTimeout(() => {
+                this.singleWaitTime = setTimeout(() => {
                   this._move()
                 }, this.options.waitTime)
               } else {
                 this._move()
               }
             } else if (!!this.options.singleWidth) {
               if (Math.abs(this.xPos) % this.options.singleWidth === 0) { // 符合条件暂停waitTime
-                if (timer) clearTimeout(timer)
-                timer = setTimeout(() => {
+                this.singleWaitTime = setTimeout(() => {
                   this._move()
                 }, this.options.waitTime)
               } else {