页面隐藏时暂停时钟

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;
-      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
+    if (isVisible) {
-      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+      interval = setInterval(() => {
-    }, 1000);
+        // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
-    return () => clearInterval(intervalId);
+        setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
-  }, [expireTime]);
+      }, 1000);
+    } 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,23 +29,29 @@ const LocalTimeClock = ({ region, timezone, ...props }) => {
   }, [region, timezone]);
 
   useEffect(() => {
-    const interval = setInterval(() => {
+    let interval;
-      // const date = new Date();
+    if (isVisible) {
-      const options = {
+      interval = setInterval(() => {
-        timeZone: timezoneP,
+        const options = {
-        timeZoneName: 'short',
+          timeZone: timezoneP,
-        hour12: false,
+          timeZoneName: 'short',
-        month: '2-digit',
+          hour12: false,
-        day: '2-digit',
+          month: '2-digit',
-        hour: '2-digit',
+          day: '2-digit',
-        minute: '2-digit',
+          hour: '2-digit',
-      };
+          minute: '2-digit',
-      // const formatter = new Intl.DateTimeFormat('en-US', options);
+          // second: '2-digit',
-      // setCustomerDateTime(formatter.format(date));
+        };
-      setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
+        // const date = new Date();
-    }, 1000);
+        // 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 ? (
     <>