chore: unify interval/timeout handling (#6015)

jacobmllr95 · web-flow · commit 2296686c1bd4 · 2020-11-05T09:01:07.000+01:00
diff --git a/docs/plugins/docs-mixin.js b/docs/plugins/docs-mixin.js
@@ -8,11 +8,6 @@ const TOC_CACHE = {}
 
 // @vue/component
 export default {
-  data() {
-    return {
-      scrollTimeout: null
-    }
-  },
   head() {
     return {
       title: this.headTitle,
@@ -70,6 +65,9 @@ export default {
     }
   },
   created() {
+    // Create private non-reactive props
+    this.$_filterTimer = null
+
     // In a `$nextTick()` to ensure `toc.vue` is created first
     this.$nextTick(() => {
       const key = `${this.$route.name}_${this.$route.params.slug || ''}`
@@ -91,10 +89,8 @@ export default {
   },
   methods: {
     clearScrollTimeout() {
-      if (this.scrollTimeout) {
-        clearTimeout(this.scrollTimeout)
-        this.scrollTimeout = null
-      }
+      clearTimeout(this.$_scrollTimeout)
+      this.$_scrollTimeout = null
     },
     focusScroll() {
       const hash = this.$route.hash
@@ -119,9 +115,9 @@ export default {
       if (el) {
         // Get the document scrolling element
         const scroller = document.scrollingElement || document.documentElement || document.body
+        this.clearScrollTimeout()
         // Allow time for v-play to finish rendering
-        this.scrollTimeout = setTimeout(() => {
-          this.clearScrollTimeout()
+        this.$_scrollTimeout = setTimeout(() => {
           // Scroll heading into view (minus offset to account for nav top height)
           scrollTo(scroller, offsetTop(el) - 70, 100)
         }, 100)
diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
@@ -62,7 +62,6 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
   data() {
     return {
       countDown: 0,
-      countDownTimeout: null,
       // If initially shown, we need to set these for SSR
       localShow: parseShow(this.show)
     }
@@ -83,7 +82,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
         }
         if (newVal > 0) {
           this.localShow = true
-          this.countDownTimeout = setTimeout(() => {
+          this.$_countDownTimeout = setTimeout(() => {
             this.countDown--
           }, 1000)
         } else {
@@ -108,6 +107,9 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
     }
   },
   created() {
+    // Create private non-reactive props
+    this.$_filterTimer = null
+
     this.countDown = parseCountDown(this.show)
     this.localShow = parseShow(this.show)
   },
@@ -125,10 +127,8 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
       this.localShow = false
     },
     clearCountDownInterval() {
-      if (this.countDownTimeout) {
-        clearTimeout(this.countDownTimeout)
-        this.countDownTimeout = null
-      }
+      clearTimeout(this.$_countDownTimeout)
+      this.$_countDownTimeout = null
     }
   },
   render(h) {
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
@@ -124,7 +124,6 @@ export const BToast = /*#__PURE__*/ Vue.extend({
       isTransitioning: false,
       isHiding: false,
       order: 0,
-      timer: null,
       dismissStarted: 0,
       resumeDismiss: 0
     }
@@ -189,6 +188,10 @@ export const BToast = /*#__PURE__*/ Vue.extend({
       }
     }
   },
+  created() {
+    // Create private non-reactive props
+    this.$_dismissTimer = null
+  },
   mounted() {
     this.isMounted = true
     this.$nextTick(() => {
@@ -289,14 +292,14 @@ export const BToast = /*#__PURE__*/ Vue.extend({
     startDismissTimer() {
       this.clearDismissTimer()
       if (!this.noAutoHide) {
-        this.timer = setTimeout(this.hide, this.resumeDismiss || this.computedDuration)
+        this.$_dismissTimer = setTimeout(this.hide, this.resumeDismiss || this.computedDuration)
         this.dismissStarted = Date.now()
         this.resumeDismiss = 0
       }
     },
     clearDismissTimer() {
-      clearTimeout(this.timer)
-      this.timer = null
+      clearTimeout(this.$_dismissTimer)
+      this.$_dismissTimer = null
     },
     setHoverHandler(on) {
       const el = this.$refs['b-toast']
@@ -305,7 +308,7 @@ export const BToast = /*#__PURE__*/ Vue.extend({
     },
     onPause() {
       // Determine time remaining, and then pause timer
-      if (this.noAutoHide || this.noHoverPause || !this.timer || this.resumeDismiss) {
+      if (this.noAutoHide || this.noHoverPause || !this.$_dismissTimer || this.resumeDismiss) {
         return
       }
       const passed = Date.now() - this.dismissStarted
diff --git a/src/components/toast/toast.spec.js b/src/components/toast/toast.spec.js
@@ -214,7 +214,7 @@ describe('b-toast', () => {
     await waitRAF()
 
     expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.vm.timer).not.toEqual(null)
+    expect(wrapper.vm.$_dismissTimer).not.toEqual(null)
 
     jest.runOnlyPendingTimers()
 
@@ -228,7 +228,7 @@ describe('b-toast', () => {
     await waitRAF()
 
     expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
-    expect(wrapper.vm.timer).toBe(null)
+    expect(wrapper.vm.$_dismissTimer).toBe(null)
 
     wrapper.destroy()
   })
@@ -259,17 +259,17 @@ describe('b-toast', () => {
     await waitRAF()
 
     expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.vm.timer).not.toEqual(null)
+    expect(wrapper.vm.$_dismissTimer).not.toEqual(null)
     await waitNT(wrapper.vm)
     await waitRAF()
 
     await wrapper.trigger('mouseenter')
     await waitRAF()
-    expect(wrapper.vm.timer).toEqual(null)
+    expect(wrapper.vm.$_dismissTimer).toEqual(null)
 
     await wrapper.trigger('mouseleave')
     await waitRAF()
-    expect(wrapper.vm.timer).not.toEqual(null)
+    expect(wrapper.vm.$_dismissTimer).not.toEqual(null)
 
     wrapper.destroy()
   })
