fix(count-down): 修复标签页置于后台，倒计时停止问题

fix Tencent#1213
hkaikai · Nov 1, 2024 · 2887d4d · 2887d4d
1 parent 28c540e
commit 2887d4d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 24 deletions.
diff --git a/src/count-down/count-down.tsx b/src/count-down/count-down.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
 import config from '../config';
 import CountDownProps from './props';
 import { useCountDown } from '../shared/useCountDown';
@@ -18,8 +18,17 @@ export default defineComponent({
       `${countDownClass.value}--${props.theme}`,
       `${countDownClass.value}--${props.size}`,
     ]);
-
-    const { showTimes } = useCountDown(props);
+    const visibility = ref(true);
+    const visibilitychangeListener = () => {
+      visibility.value = !document.hidden;
+    };
+    onMounted(() => {
+      document.addEventListener('visibilitychange', visibilitychangeListener, false);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener('visibilitychange', visibilitychangeListener, false);
+    });
+    const { showTimes } = useCountDown(props, visibility);
     return () => {
       const renderContent = () => {
         const content = renderTNodeJSX('content');

diff --git a/src/shared/useCountDown/index.ts b/src/shared/useCountDown/index.ts
@@ -1,10 +1,10 @@
-import { ref, reactive } from 'vue';
+import { ref, reactive, Ref, watch } from 'vue';
 import { useRafFn } from '@vueuse/core';
 import { TdUseCountDownProps, TdUseCountDown } from './type';
 import { getRemainTimes, getShowTimes, getScreenFps } from './utils';
 import { isBrowser } from '../util';
 
-export function useCountDown(props: TdUseCountDownProps): TdUseCountDown {
+export function useCountDown(props: TdUseCountDownProps, visibility?: Ref<boolean>): TdUseCountDown {
   const {
     time = 0,
     autoStart,
@@ -18,27 +18,37 @@ export function useCountDown(props: TdUseCountDownProps): TdUseCountDown {
   const fps = ref();
   const count = ref(Number(time));
   const showTimes = reactive(getShowTimes(getRemainTimes(time), format, millisecond, splitWithUnit));
+  let hiddenTime = 0;
 
-  // raf
-  const { pause, resume } = useRafFn(
-    async () => {
-      if (!isBrowser) return;
-      if (!fps.value) {
-        const res = await getScreenFps?.();
-        fps.value = res || 60;
-      }
-      count.value = parseInt(`${Number(count.value) - 1000 / fps.value}`, 10);
-      if (count.value <= 0) {
-        pause?.();
-        count.value = 0;
+  visibility &&
+    watch(visibility, (val) => {
+      if (val) {
+        count.value -= Date.now() - hiddenTime;
+        rafFn();
+      } else {
+        hiddenTime = Date.now();
       }
-      const times = getRemainTimes(count.value);
-      onChange?.(times);
-      count.value === 0 && onFinish?.();
-      getShowTimes(times, format, millisecond, splitWithUnit)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value));
-    },
-    { immediate: autoStart },
-  );
+    });
+
+  const rafFn = async () => {
+    if (!isBrowser) return;
+    if (!fps.value) {
+      const res = await getScreenFps?.();
+      fps.value = res || 60;
+    }
+    count.value = parseInt(`${Number(count.value) - 1000 / fps.value}`, 10);
+    if (count.value <= 0) {
+      pause?.();
+      count.value = 0;
+    }
+    const times = getRemainTimes(count.value);
+    onChange?.(times);
+    count.value === 0 && onFinish?.();
+    getShowTimes(times, format, millisecond, splitWithUnit)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value));
+  };
+
+  // raf
+  const { pause, resume } = useRafFn(rafFn, { immediate: autoStart });
 
   /**
    * return