refactor: move infinite loop check logic into utils

Author: PeachScript

src/components/InfiniteLoading.vue

@@ -16,8 +16,8 @@
 <script>
 /* eslint-disable no-console */
 import Spinner from './Spinner.vue';
-import config, { evt3rdArg, WARNINGS, ERRORS } from '../config';
-import { throttleer } from '../utils';
+import config, { evt3rdArg, WARNINGS } from '../config';
+import { throttleer, loopTracker } from '../utils';
 
 /**
  * determine slot is or not a empty element
@@ -42,9 +42,6 @@ export default {
       isLoading: false,
       isComplete: false,
       isFirstLoad: true, // save the current loading whether it is the first loading
-      infiniteLoopChecked: false, // save the status of infinite loop check
-      infiniteLoopTimer: null,
-      continuousCallTimes: 0,
       slots: config.slots,
     };
   },
@@ -213,21 +210,10 @@ export default {
           this.$emit('infinite', this.stateChanger);
         }
 
-        if (isContinuousCall && !this.forceUseInfiniteWrapper && !this.infiniteLoopChecked) {
+        if (isContinuousCall && !this.forceUseInfiniteWrapper && !loopTracker.isChecked) {
           // check this component whether be in an infinite loop if it is not checked
           // more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169
-          this.continuousCallTimes += 1; // save the times of calls
-
-          clearTimeout(this.infiniteLoopTimer);
-          this.infiniteLoopTimer = setTimeout(() => {
-            this.infiniteLoopChecked = true;
-          }, config.system.loopCheckTimeout);
-
-          // throw warning if the times of continuous calls large than the maximum times
-          if (this.continuousCallTimes > config.system.loopCheckMaxCalls) {
-            console.error(ERRORS.INFINITE_LOOP);
-            this.infiniteLoopChecked = true;
-          }
+          loopTracker.track();
         }
       } else {
         this.isLoading = false;

src/utils.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import config from './config';
+import config, { ERRORS } from './config';
 
 export const throttleer = {
   caches: [],
@@ -18,6 +18,29 @@ export const throttleer = {
   },
 };
 
+export const loopTracker = {
+  isChecked: false,
+  timer: null,
+  times: 0,
+  track() {
+    // record track times
+    this.times += 1;
+
+    // try to mark check status
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.isChecked = true;
+    }, config.system.loopCheckTimeout);
+
+    // throw warning if the times of continuous calls large than the maximum times
+    if (this.times > config.system.loopCheckMaxCalls) {
+      console.error(ERRORS.INFINITE_LOOP);
+      this.isChecked = true;
+    }
+  },
+};
+
 export default {
   throttleer,
+  loopTracker,
 };

test/unit/specs/InfiniteLoading.spec.js

@@ -3,6 +3,7 @@
 import Vue from 'vue/dist/vue.common';
 import { isShow, continuesCall, fakeBox } from '../utils';
 import config from '../../../src/config';
+import { loopTracker } from '../../../src/utils';
 import InfiniteLoading from '../../../src/components/InfiniteLoading.vue';
 
 describe('vue-infinite-loading:component', () => {
@@ -497,9 +498,9 @@ describe('vue-infinite-loading:component', () => {
             console.error = fakeBox();
             // wait for the loop check flag be marked as true
             setTimeout(() => {
-              expect(this.$refs.infiniteLoading.infiniteLoopChecked).to.be.true;
+              expect(loopTracker.isChecked).to.be.true;
               done();
-            }, 1501);
+            }, config.system.loopCheckTimeout);
           }
         },
       },