perf(ui): improve timeouts & intervals management #15203

quasarframework · Jan 4, 2023 · 359d543 · 359d543
1 parent 585a05b
commit 359d543
Show file tree

Hide file tree

Showing 27 changed files with 262 additions and 125 deletions.
diff --git a/ui/src/components/ajax-bar/QAjaxBar.js b/ui/src/components/ajax-bar/QAjaxBar.js
@@ -119,7 +119,7 @@ export default createComponent({
     const onScreen = ref(false)
     const animate = ref(true)
 
-    let sessions = 0, timer, speed
+    let sessions = 0, timer = null, speed
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -171,19 +171,21 @@ export default createComponent({
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
         }
-        else if (oldSpeed > 0 && newSpeed <= 0) {
+        else if (timer !== null && oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
+          timer = null
         }
 
         return sessions
       }
 
-      clearTimeout(timer)
+      timer !== null && clearTimeout(timer)
       emit('start')
 
       progress.value = 0
 
       timer = setTimeout(() => {
+        timer = null
         animate.value = true
         newSpeed > 0 && planNextStep()
       }, onScreen.value === true ? 500 : 1)
@@ -210,13 +212,18 @@ export default createComponent({
         return sessions
       }
 
-      clearTimeout(timer)
+      if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
+      }
+
       emit('stop')
 
       const end = () => {
         animate.value = true
         progress.value = 100
         timer = setTimeout(() => {
+          timer = null
           onScreen.value = false
         }, 1000)
       }
@@ -234,6 +241,7 @@ export default createComponent({
     function planNextStep () {
       if (progress.value < 100) {
         timer = setTimeout(() => {
+          timer = null
           increment()
           planNextStep()
         }, speed)
@@ -254,7 +262,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimeout(timer)
+      timer !== null && clearTimeout(timer)
       hijacked === true && restoreAjax(start)
     })
 

diff --git a/ui/src/components/btn/QBtn.js b/ui/src/components/btn/QBtn.js
@@ -46,7 +46,7 @@ export default createComponent({
     const rootRef = ref(null)
     const blurTargetRef = ref(null)
 
-    let localTouchTargetEl = null, avoidMouseRipple, mouseTimer
+    let localTouchTargetEl = null, avoidMouseRipple, mouseTimer = null
 
     const hasLabel = computed(() =>
       props.label !== void 0 && props.label !== null && props.label !== ''
@@ -192,8 +192,9 @@ export default createComponent({
       // avoid duplicated mousedown event
       // triggering another early ripple
       avoidMouseRipple = true
-      clearTimeout(mouseTimer)
+      mouseTimer !== null && clearTimeout(mouseTimer)
       mouseTimer = setTimeout(() => {
+        mouseTimer = null
         avoidMouseRipple = false
       }, 200)
     }

diff --git a/ui/src/components/carousel/QCarousel.js b/ui/src/components/carousel/QCarousel.js
@@ -68,7 +68,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
 
-    let timer, panelsLen
+    let timer = null, panelsLen
 
     const {
       updatePanelsList, getPanelContent,
@@ -122,7 +122,6 @@ export default createComponent({
 
     watch(() => props.modelValue, () => {
       if (props.autoplay) {
-        clearInterval(timer)
         startTimer()
       }
     })
@@ -131,28 +130,36 @@ export default createComponent({
       if (val) {
         startTimer()
       }
-      else {
-        clearInterval(timer)
+      else if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
       }
     })
 
     function startTimer () {
       const duration = isNumber(props.autoplay) === true
-        ? props.autoplay
+        ? Math.abs(props.autoplay)
         : 5000
 
-      timer = setTimeout(
-        duration >= 0 ? nextPanel : previousPanel,
-        Math.abs(duration)
-      )
+      timer !== null && clearTimeout(timer)
+      timer = setTimeout(() => {
+        timer = null
+
+        if (duration >= 0) {
+          nextPanel()
+        }
+        else {
+          previousPanel()
+        }
+      }, duration)
     }
 
     onMounted(() => {
       props.autoplay && startTimer()
     })
 
     onBeforeUnmount(() => {
-      clearInterval(timer)
+      timer !== null && clearTimeout(timer)
     })
 
     function getNavigationContainer (type, mapping) {

diff --git a/ui/src/components/dialog/QDialog.js b/ui/src/components/dialog/QDialog.js
@@ -84,7 +84,7 @@ export default createComponent({
     const showing = ref(false)
     const animating = ref(false)
 
-    let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose
+    let shakeTimeout = null, refocusTarget = null, isMaximized, avoidAutoClose
 
     const hideOnRouteChange = computed(() =>
       props.persistent !== true
@@ -266,8 +266,9 @@ export default createComponent({
       if (node !== null) {
         node.classList.remove('q-animate--scale')
         node.classList.add('q-animate--scale')
-        clearTimeout(shakeTimeout)
+        shakeTimeout !== null && clearTimeout(shakeTimeout)
         shakeTimeout = setTimeout(() => {
+          shakeTimeout = null
           if (innerRef.value !== null) {
             node.classList.remove('q-animate--scale')
             // some platforms (like desktop Chrome)
@@ -291,7 +292,10 @@ export default createComponent({
     }
 
     function cleanup (hiding) {
-      clearTimeout(shakeTimeout)
+      if (shakeTimeout !== null) {
+        clearTimeout(shakeTimeout)
+        shakeTimeout = null
+      }
 
       if (hiding === true || showing.value === true) {
         updateMaximized(false)

diff --git a/ui/src/components/drawer/QDrawer.js b/ui/src/components/drawer/QDrawer.js
@@ -83,7 +83,7 @@ export default createComponent({
       return emptyRenderFn
     }
 
-    let lastDesktopState, timerMini, layoutTotalWidthWatcher
+    let lastDesktopState, timerMini = null, layoutTotalWidthWatcher
 
     const belowBreakpoint = ref(
       props.behavior === 'mobile'
@@ -458,7 +458,7 @@ export default createComponent({
     }
 
     function animateMini () {
-      clearTimeout(timerMini)
+      timerMini !== null && clearTimeout(timerMini)
 
       if (vm.proxy && vm.proxy.$el) {
         // need to speed it up and apply it immediately,
@@ -468,6 +468,7 @@ export default createComponent({
 
       flagMiniAnimate.value = true
       timerMini = setTimeout(() => {
+        timerMini = null
         flagMiniAnimate.value = false
         if (vm && vm.proxy && vm.proxy.$el) {
           vm.proxy.$el.classList.remove('q-drawer--mini-animate')
@@ -620,7 +621,11 @@ export default createComponent({
 
     onBeforeUnmount(() => {
       layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher()
-      clearTimeout(timerMini)
+
+      if (timerMini !== null) {
+        clearTimeout(timerMini)
+        timerMini = null
+      }
 
       showing.value === true && cleanup()
 

diff --git a/ui/src/components/img/QImg.js b/ui/src/components/img/QImg.js
@@ -69,7 +69,7 @@ export default createComponent({
     const naturalRatio = ref(props.initialRatio)
     const ratioStyle = useRatio(props, naturalRatio)
 
-    let loadTimer
+    let loadTimer = null, isDestroyed = false
 
     const images = [
       ref(null),
@@ -120,7 +120,11 @@ export default createComponent({
     }
 
     function addImage (imgProps) {
-      clearTimeout(loadTimer)
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
       hasError.value = false
 
       if (imgProps === null) {
@@ -135,10 +139,12 @@ export default createComponent({
     }
 
     function onLoad ({ target }) {
-      // if component has been already destroyed
-      if (loadTimer === null) { return }
+      if (isDestroyed === true) { return }
 
-      clearTimeout(loadTimer)
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
 
       naturalRatio.value = target.naturalHeight === 0
         ? 0.5
@@ -149,21 +155,21 @@ export default createComponent({
 
     function waitForCompleteness (target, count) {
       // protect against running forever
-      if (loadTimer === null || count === 1000) { return }
+      if (isDestroyed === true || count === 1000) { return }
 
       if (target.complete === true) {
         onReady(target)
       }
       else {
         loadTimer = setTimeout(() => {
+          loadTimer = null
           waitForCompleteness(target, count + 1)
         }, 50)
       }
     }
 
     function onReady (img) {
-      // if component has been already destroyed
-      if (loadTimer === null) { return }
+      if (isDestroyed === true) { return }
 
       position.value = position.value ^ 1
       images[ position.value ].value = null
@@ -173,7 +179,11 @@ export default createComponent({
     }
 
     function onError (err) {
-      clearTimeout(loadTimer)
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
       isLoading.value = false
       hasError.value = true
       images[ position.value ].value = null
@@ -253,8 +263,12 @@ export default createComponent({
       }
 
       onBeforeUnmount(() => {
-        clearTimeout(loadTimer)
-        loadTimer = null
+        isDestroyed = true
+
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer)
+          loadTimer = null
+        }
       })
     }
 

diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
@@ -49,7 +49,7 @@ export default createComponent({
     const { $q } = proxy
 
     const temp = {}
-    let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer, emitValueFn
+    let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer = null, emitValueFn
 
     const inputRef = ref(null)
     const nameProp = useFormInputNameAttr(props)
@@ -261,6 +261,8 @@ export default createComponent({
 
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
+        emitTimer = null
+
         if (
           props.type !== 'number'
           && temp.hasOwnProperty('value') === true
@@ -288,7 +290,7 @@ export default createComponent({
       }
 
       if (props.debounce !== void 0) {
-        clearTimeout(emitTimer)
+        emitTimer !== null && clearTimeout(emitTimer)
         temp.value = val
         emitTimer = setTimeout(emitValueFn, props.debounce)
       }
@@ -322,7 +324,11 @@ export default createComponent({
     function onChange (e) {
       onComposition(e)
 
-      clearTimeout(emitTimer)
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer)
+        emitTimer = null
+      }
+
       emitValueFn !== void 0 && emitValueFn()
 
       emit('change', e.target.value)
@@ -331,7 +337,11 @@ export default createComponent({
     function onFinishEditing (e) {
       e !== void 0 && stop(e)
 
-      clearTimeout(emitTimer)
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer)
+        emitTimer = null
+      }
+
       emitValueFn !== void 0 && emitValueFn()
 
       typedNumber = false

diff --git a/ui/src/components/layout/QLayout.js b/ui/src/components/layout/QLayout.js
@@ -122,7 +122,7 @@ export default createComponent({
       }
     }
 
-    let timer
+    let animateTimer = null
 
     const $layout = {
       instances: {},
@@ -153,16 +153,16 @@ export default createComponent({
       scroll,
 
       animate () {
-        if (timer !== void 0) {
-          clearTimeout(timer)
+        if (animateTimer !== null) {
+          clearTimeout(animateTimer)
         }
         else {
           document.body.classList.add('q-body--layout-animate')
         }
 
-        timer = setTimeout(() => {
+        animateTimer = setTimeout(() => {
+          animateTimer = null
           document.body.classList.remove('q-body--layout-animate')
-          timer = void 0
         }, 155)
       },