解决内存泄漏导致页面卡顿

src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -148,6 +148,8 @@ onMounted(() => {
   }
 })
 const canvas = ref(null)
+const timer1 = ref<NodeJS.Timeout | number>(0)
+const timer2 = ref<NodeJS.Timeout | number>(0)
 const canvasClick = (e) => {
   checkPosArr.push(getMousePos(canvas, e))
   if (num.value == checkNum.value) {
@@ -157,7 +159,7 @@ const canvasClick = (e) => {
     checkPosArr.length = 0
     checkPosArr.push(...arr)
     //等创建坐标执行完
-    setTimeout(() => {
+    timer1.value = setTimeout(() => {
       // var flag = this.comparePos(this.fontPos, this.checkPosArr);
       //发送后端请求
       var captchaVerification = secretKey.value
@@ -177,9 +179,13 @@ const canvasClick = (e) => {
           text.value = t('captcha.success')
           bindingClick.value = false
           if (mode.value == 'pop') {
-            setTimeout(() => {
+            timer2.value = setTimeout(() => {
               proxy.$parent.clickShow = false
               refresh()
+              if(timer2.value){
+                clearTimeout(timer2.value)
+                timer2.value = 0
+              }
             }, 1500)
           }
           proxy.$parent.$emit('success', { captchaVerification })
@@ -188,17 +194,33 @@ const canvasClick = (e) => {
           barAreaColor.value = '#d9534f'
           barAreaBorderColor.value = '#d9534f'
           text.value = t('captcha.fail')
-          setTimeout(() => {
+          timer2.value = setTimeout(() => {
             refresh()
+            if(timer2.value){
+                clearTimeout(timer2.value)
+                timer2.value = 0
+            }
           }, 700)
         }
       })
+      if(timer1.value){
+        clearTimeout(timer1.value)
+        timer1.value = 0
+      }
     }, 400)
   }
   if (num.value < checkNum.value) {
     num.value = createPoint(getMousePos(canvas, e))
   }
 }
+onBeforeUnmount(() => {
+  if(timer1.value){
+    clearTimeout(timer1.value)
+  }
+  if(timer2.value){
+    clearTimeout(timer2.value)
+  }
+})
 //获取坐标
 const getMousePos = function (obj, e) {
   var x = e.offsetX

src/components/Verifition/src/Verify/VerifySlide.vue

@@ -295,9 +295,14 @@ const end = () => {
         showRefresh.value = false
         isEnd.value = true
         if (mode.value == 'pop') {
-          setTimeout(() => {
+          let timer 
+          timer = setTimeout(() => {
             proxy.$parent.clickShow = false
             refresh()
+            if(timer){
+              clearTimeout(timer)
+              timer = null
+            }
           }, 1500)
         }
         passFlag.value = true
@@ -309,10 +314,15 @@ const end = () => {
               secretKey.value
             )
           : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
-        setTimeout(() => {
+        let timer 
+        timer =  setTimeout(() => {
           tipWords.value = ''
           proxy.$parent.closeBox()
           proxy.$parent.$emit('success', { captchaVerification })
+          if(timer){
+            clearTimeout(timer)
+            timer = null
+          }
         }, 1000)
       } else {
         moveBlockBackgroundColor.value = '#d9534f'
@@ -320,13 +330,23 @@ const end = () => {
         iconColor.value = '#fff'
         iconClass.value = 'icon-close'
         passFlag.value = false
-        setTimeout(function () {
+        let timer
+        timer =  setTimeout(()=>{
           refresh()
+          if(timer){
+              clearTimeout(timer)
+              timer = null
+            }
         }, 1000)
         proxy.$parent.$emit('error', proxy)
         tipWords.value = t('captcha.fail')
-        setTimeout(() => {
+        let timer1 
+        timer1 =  setTimeout(() => {
           tipWords.value = ''
+          if(timer1){
+            clearTimeout(timer1)
+            timer1 = null
+          }
         }, 1000)
       }
     })
@@ -351,10 +371,15 @@ const refresh = async () => {
   isEnd.value = false
 
   await getPictrue()
-  setTimeout(() => {
+  let timer 
+  timer = setTimeout(() => {
     transitionWidth.value = ''
     transitionLeft.value = ''
     text.value = explain.value
+    if(timer){
+      clearTimeout(timer)
+      timer = null
+    }
   }, 300)
 }
 

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -76,6 +76,9 @@ const resetBaseInfo = () => {
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
   console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 }
+const timer1 = ref<NodeJS.Timeout | number>()
+const timer2 = ref<NodeJS.Timeout | number>()
+const timer3 = ref<NodeJS.Timeout | number>()
 const handleKeyUpdate = (value) => {
   // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
   if (!value) {
@@ -90,8 +93,12 @@ const handleKeyUpdate = (value) => {
   // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
   elementBaseInfo.value['id'] = value
 
-  setTimeout(() => {
+  timer1.value = setTimeout(() => {
     updateBaseInfo('id')
+    if(timer1.value){
+      clearTimeout(timer1.value)
+      timer1.value = 0
+    }
   }, 100)
 }
 const handleNameUpdate = (value) => {
@@ -101,8 +108,12 @@ const handleNameUpdate = (value) => {
   }
   elementBaseInfo.value['name'] = value
 
-  setTimeout(() => {
+  timer2.value  = setTimeout(() => {
     updateBaseInfo('name')
+    if(timer2.value){
+      clearTimeout(timer2.value)
+      timer2.value = 0
+    }
   }, 100)
 }
 // const handleDescriptionUpdate=(value)=> {
@@ -140,10 +151,14 @@ const updateBaseInfo = (key) => {
 }
 onMounted(() => {
   // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
-  setTimeout(() => {
+  timer3.value = setTimeout(() => {
     console.log(props.model, 'props.model')
     handleKeyUpdate(props.model.key)
     handleNameUpdate(props.model.name)
+    if(timer3.value){
+      clearTimeout(timer3.value)
+      timer3.value = 0
+    }
     console.log(props, 'propsssssssssssssssssssss')
   }, 1000)
 })
@@ -180,5 +195,17 @@ watch(
 // }
 onBeforeUnmount(() => {
   bpmnElement.value = null
+  if(timer1.value){
+    clearTimeout(timer1.value)
+    timer1.value = 0
+  }
+  if(timer2.value){
+    clearTimeout(timer2.value)
+    timer2.value = 0
+  }
+  if(timer3.value){
+    clearTimeout(timer3.value)
+    timer3.value = 0
+  }
 })
 </script>

src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js

@@ -22,9 +22,13 @@ export default {
       methodName: binding.expression,
       bindingFn: binding.value
     }
-
+    let timer 
-    setTimeout(() => {
+    timer = setTimeout(() => {
       document.addEventListener('touchstart', documentHandler) // 为document绑定事件
+      if(timer){
+        clearTimeout(timer)
+        timer = null
+      }
     })
   },
   update(el, binding) {

src/components/iFrame/src/IFrame.vue

@@ -14,6 +14,8 @@ const init = () => {
   height.value = document.documentElement.clientHeight - 94.5 + 'px'
   loading.value = false
 }
+const timer1 = ref<NodeJS.Timeout | number>()
+const timer2 = ref<NodeJS.Timeout | number>()
 console.log(props.src);
 
 function populateIframe(iframe, headers) {
@@ -37,14 +39,33 @@ function populateIframe(iframe, headers) {
 
 onMounted(() => {
   
-  setTimeout(() => {
+  timer1.value = setTimeout(() => {
     var iframe = document.querySelector("#iframe");
     populateIframe(iframe, [["Authorization", 'Bearer ' +  getAccessToken()], ["tenant-id", getTenantId()]]);
+    if(timer1.value){
+      clearTimeout(timer1.value)
+      timer1.value = 0
+    }
   }, 300);
-  setTimeout(() => {
+  timer2.value = setTimeout(() => {
     init()
+    if(timer2.value){
+      clearTimeout(timer2.value)
+      timer2.value = 0
+    }
   }, 300)
 })
+
+onBeforeUnmount(() => {
+  if(timer1.value){
+    clearTimeout(timer1.value)
+    timer1.value = 0
+  }
+  if(timer2.value){
+    clearTimeout(timer2.value)
+    timer2.value = 0
+  }
+})
 </script>
 <template>
   <div v-loading="loading" :style="'height:' + height">

src/layout/components/Logo/src/Logo.vue

@@ -18,6 +18,7 @@ const title = computed(() => appStore.getTitle)
 const layout = computed(() => appStore.getLayout)
 
 const collapse = computed(() => appStore.getCollapse)
+const timer = ref<NodeJS.Timeout | number>()
 
 onMounted(() => {
   if (unref(collapse)) show.value = false
@@ -31,14 +32,24 @@ watch(
       return
     }
     if (!collapse) {
-      setTimeout(() => {
+      timer.value = setTimeout(() => {
         show.value = !collapse
+        if(timer.value){
+          clearTimeout(timer.value)
+          timer.value = 0
+        }
       }, 400)
     } else {
       show.value = !collapse
     }
   }
 )
+onBeforeUnmount(() => {
+  if(timer.value){
+    clearTimeout(timer.value)
+    timer.value = 0
+  }
+})
 
 watch(
   () => layout.value,

src/layout/components/TabMenu/src/TabMenu.vue

@@ -37,6 +37,7 @@ export default defineComponent({
     const setCollapse = () => {
       appStore.setCollapse(!unref(collapse))
     }
+    const  timer = ref<NodeJS.Timeout | number>()
 
     onMounted(() => {
       if (unref(fixedMenu)) {
@@ -77,14 +78,24 @@ export default defineComponent({
       () => collapse.value,
       (collapse: boolean) => {
         if (!collapse) {
-          setTimeout(() => {
+          timer.value = setTimeout(() => {
             showTitle.value = !collapse
+            if(timer.value){
+              clearTimeout(timer.value)
+              timer.value = 0
+            }
           }, 200)
         } else {
           showTitle.value = !collapse
         }
       }
     )
+    onBeforeUnmount(() => {
+      if(timer.value){
+        clearTimeout(timer.value)
+        timer.value = 0
+      }
+    })
 
     // 是否显示菜单
     const showMenu = ref(unref(fixedMenu) ? true : false)

src/views/bpm/model/editor/index.vue

@@ -49,14 +49,26 @@ const controlForm = ref({
   additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
 })
 const model = ref<ModelApi.ModelVO>() // 流程模型的信息
+const timer = ref<NodeJS.Timeout | number>()
 
 /** 初始化 modeler */
 const initModeler = (item) => {
-  setTimeout(() => {
+  timer.value = setTimeout(() => {
     modeler.value = item
+    if(timer.value){
+      clearTimeout(timer.value)
+      timer.value = 0
+    }
   }, 10)
 }
 
+onBeforeUnmount(() => {
+  if(timer.value){
+    clearTimeout(timer.value)
+    timer.value = 0
+  }
+})
+
 /** 添加/修改模型 */
 const save = async (bpmnXml) => {
   const data = {

src/views/login/components/MobileForm.vue

@@ -149,6 +149,7 @@ const smsVO = reactive({
 })
 const mobileCodeTimer = ref(0)
 const msgTimer = ref<NodeJS.Timeout | number>()
+const timer = ref<NodeJS.Timeout | number>()
 const redirect = ref<string>('')
 const getSmsCode = async () => {
   await getTenantId()
@@ -161,6 +162,7 @@ const getSmsCode = async () => {
       mobileCodeTimer.value = mobileCodeTimer.value - 1
       if (mobileCodeTimer.value <= 0) {
         clearInterval(msgTimer.value)
+        msgTimer.value = 0
       }
     }, 1000)
   })
@@ -168,6 +170,11 @@ const getSmsCode = async () => {
 onBeforeUnmount(() => {
   if(msgTimer.value){
     clearInterval(msgTimer.value)
+    msgTimer.value = 0
+  }
+  if(timer.value){
+    clearTimeout(timer.value)
+    timer.value = 0
   }
 })
 watch(
@@ -210,9 +217,13 @@ const signIn = async () => {
     .catch(() => {})
     .finally(() => {
       loginLoading.value = false
-      setTimeout(() => {
+      timer.value = setTimeout(() => {
         const loadingInstance = ElLoading.service()
         loadingInstance.close()
+        if(timer.value){
+          clearTimeout(timer.value)
+          timer.value = 0
+        }
       }, 400)
     })
 }