页面隐藏时暂停时钟

src/views/Conversations/Online/ExpireTimeClock.jsx

@@ -6,23 +6,30 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
 const ExpireTimeClock = ({ expireTime }) => {
+  const isVisible = useVisibilityState();
 
   const [customerDateTime, setCustomerDateTime] = useState('');
   const [isExpired, setIsExpired] = useState(false);
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
         // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
         setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
       }, 1000);
-    return () => clearInterval(intervalId);
-  }, [expireTime]);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isVisible, expireTime]);
 
   useEffect(() => {
     const _ago = customerDateTime.slice(-3) === 'ago';

src/views/Conversations/Online/LocalTimeClock.jsx

@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import { Typography, Select } from 'antd';
 import ct from 'countries-and-timezones';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 const LocalTimeClock = ({ region, timezone, ...props }) => {
+  const isVisible = useVisibilityState();
+
   const [countryTimezones, setCountryTimezones] = useState([]);
   const [timezoneP, setTimezoneP] = useState(timezone);
   const [customerDateTime, setCustomerDateTime] = useState();
-  console.log(timezone, timezoneP);
+  // console.log(timezone, timezoneP);
 
   useEffect(() => {
     if (timezone) {
@@ -26,8 +29,9 @@ const LocalTimeClock = ({ region, timezone, ...props }) => {
   }, [region, timezone]);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      // const date = new Date();
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
         const options = {
           timeZone: timezoneP,
           timeZoneName: 'short',
@@ -36,13 +40,18 @@ const LocalTimeClock = ({ region, timezone, ...props }) => {
           day: '2-digit',
           hour: '2-digit',
           minute: '2-digit',
+          // second: '2-digit',
         };
+        // const date = new Date();
         // const formatter = new Intl.DateTimeFormat('en-US', options);
         // setCustomerDateTime(formatter.format(date));
         setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
       }, 1000);
+    } else {
+      clearInterval(interval);
+    }
     return () => clearInterval(interval);
-  }, [timezoneP]);
+  }, [isVisible, timezoneP]);
 
   return region ? (
     <>