时间修改

src/plugins/syncServerTime.js

@@ -1,39 +1,107 @@
-let serverTime = getLocalTime();
-let setTs = [];
+/**
+ *
+ * 方案1：
+ * 前端自动递增同步服务端时间
+ * 缺陷：在系统休眠或页面被隐藏时，js有不再执行的可能，自动同步失效。
+ * 弥补：通过监听页面隐藏事件，记录下次显示页面时的时间差，自动修改正本地服务端时间。
+ * 但这样依旧依赖在下次显示页面前，不能修改本地时间。
+ *
+ * 方案2：
+ * 每次初始化服务端时间时记录本地时间与服务端时间差。
+ * 缺陷：在下次初始化服务端时间前，默认用户不会自己修改系统时间
+ * 弥补：在每次请求响应之后，修正时间差。
+ */
 
-syncTime(serverTime);
+// 方案1:
+// let serverTime = getLocalTime();
+// let pageHideTime = null;
+// let setTs = [];
 
-function initSyncTime(time) {
-  syncTime(time);
-}
+// syncTime(serverTime);
 
-function getLocalTime() {
-  const time = localStorage.getItem("st");
-  const unvalidVals = ["Infinity", "NaN", "null", "undefined"];
-  return unvalidVals.includes(time) ? Date.now() : time * 1;
-}
+// function getLocalTime() {
+//   const st = localStorage.getItem("st");
+//   const unvalidVals = ["Infinity", "NaN", "null", "undefined"];
+//   return unvalidVals.includes(st + "") ? Date.now() : st * 1;
+// }
 
-function addSetTime(action, time = 1 * 1000) {
-  setTs.push(setTimeout(action, time));
-}
+// function addSetTime(action, time = 1 * 1000) {
+//   setTs.push(setTimeout(action, time));
+// }
+
+// function clearSetTs() {
+//   if (!setTs.length) return;
+//   setTs.forEach(t => clearTimeout(t));
+//   setTs = [];
+// }
+
+// function initSyncTime(time) {
+//   syncTime(time);
+// }
+
+// function syncTime(time) {
+//   // console.log(Date.now() - time);
+//   clearSetTs();
+//   serverTime = time;
+//   localStorage.setItem("st", time);
+//   addSetTime(() => {
+//     syncTime(serverTime + 1000);
+//   });
+// }
 
-function clearSetTs() {
-  if (!setTs.length) return;
-  setTs.forEach(t => clearTimeout(t));
-  setTs = [];
+// function pageHide() {
+//   pageHideTime = Date.now();
+//   clearSetTs();
+// }
+// function pageShow() {
+//   const hideTime = pageHideTime || Date.now();
+//   const hideDuration = Date.now() - hideTime;
+//   // console.log(`隐藏时间：${hideDuration}`);
+//   syncTime(serverTime + hideDuration);
+// }
+
+// function fetchTime() {
+//   return serverTime;
+// }
+
+// window.document.addEventListener("visibilitychange", () => {
+//   if (document.hidden) {
+//     pageHide();
+//     // console.log("隐藏了", Date.now() - serverTime);
+//   } else {
+//     pageShow();
+//     // console.log("显示了", Date.now() - serverTime);
+//   }
+// });
+
+// export { initSyncTime, fetchTime };
+
+// 方案2：
+let initLocalTime = null;
+let initServerTime = null;
+
+function getStorgeTime() {
+  const st = localStorage.getItem("st");
+  const unvalidVals = ["Infinity", "NaN", "null", "undefined"];
+  if (unvalidVals.includes(st + "")) {
+    return [Date.now(), Date.now()];
+  } else {
+    const [s, t] = st.split("_");
+    return [s * 1, t * 1];
+  }
 }
 
-function syncTime(time) {
-  clearSetTs();
-  serverTime = time;
-  localStorage.setItem("st", time);
-  addSetTime(() => {
-    syncTime(serverTime + 1000);
-  });
+const [serverTime, localTime] = getStorgeTime();
+initSyncTime(serverTime, localTime);
+
+function initSyncTime(serverTime, localTime = Date.now()) {
+  initLocalTime = localTime;
+  initServerTime = serverTime;
+  localStorage.setItem("st", `${initServerTime}_${initLocalTime}`);
 }
 
 function fetchTime() {
-  return serverTime;
+  return Date.now() + initServerTime - initLocalTime;
 }
 
 export { initSyncTime, fetchTime };