🐛 修复使用 ViewTransition 引发的一堆问题

Skywt2003 · Mar 4, 2024 · 99949f0 · 99949f0
1 parent a8d1826
commit 99949f0
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 35 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -30,10 +30,14 @@ const { path = [] } = Astro.props;
 </nav>
 
 <script is:inline>
+  // 使用 ViewTransition 后，所有 DOM 操作的 js 都有一堆问题
+  // 这里用了极不优雅的 var，有待改进
+  var observer;
   function addNavObserver() {
     const headerEl = document.querySelector("#navbar-wrapper");
     const sentinalEl = document.querySelector("header");
-    const observer = new window.IntersectionObserver((e) => {
+    if (!sentinalEl || !headerEl) return;
+    observer = new window.IntersectionObserver((e) => {
       if (!e[0].isIntersecting) {
         headerEl.classList.add("sticked");
       } else {
@@ -43,13 +47,26 @@ const { path = [] } = Astro.props;
     observer.observe(sentinalEl);
   }
 
+  function removeNavObserver() {
+    if (observer) observer.disconnect();
+    observer = null;
+  }
+
   document.addEventListener(
     "astro:page-load",
     () => {
       addNavObserver();
     },
     { once: false },
   );
+
+  document.addEventListener(
+    "astro:before-swap",
+    () => {
+      removeNavObserver();
+    },
+    { once: false },
+  );
 </script>
 
 <style lang="scss">

diff --git a/src/pages/about.md b/src/pages/about.md
@@ -41,26 +41,40 @@ typechoSlug: about
 
 ### 时间轴
 
-<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
-
-<script>
-var now = new Date();
-function createtime() {
-	var grt = new Date("12/11/2017 11:00:00");
-	now.setTime(now.getTime() + 250);
-	days = (now-grt) / 1000 / 60 / 60 / 24;
-	dnum = Math.floor(days);
-	hours = (now-grt) / 1000 / 60 / 60 - (24*dnum);
-	hnum = Math.floor(hours); if (0<=hnum && hnum<=9) {hnum = "0"+hnum}
-	minutes = (now-grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
-	mnum = Math.floor(minutes); if (0<=mnum && mnum<=9) {mnum = "0"+mnum}
-	seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
-	snum = Math.round(seconds); if (0<=snum && snum<=9) {snum = "0"+snum}
-	document.getElementById("timeDate").innerHTML = "本站已运行 " + dnum + " 天 ";
-	document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒。"
-}
-setInterval("createtime()", 250);
-</script>
+从创建至今，这个网站已运行 <span id="uptime"></span>。
+
+<!-- <script is:inline>
+  const uptime = document.getElementById("uptime");
+  const now = new Date();
+  const grt = new Date("12/11/2017 11:00:00");
+  const getUptime = () => {
+    now.setTime(now.getTime() + 250);
+    const diff = now.getTime() - grt.getTime();
+    const dnum = Math.floor(diff / 1000 / 60 / 60 / 24);
+    const hnum = Math.floor(diff / 1000 / 60 / 60 - 24 * dnum);
+    const mnum = Math.floor(
+      diff / 1000 / 60 - 24 * 60 * dnum - 60 * hnum,
+    );
+    const snum = Math.round(
+      diff / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum,
+    );
+
+    uptime.innerText =
+      (dnum ? dnum.toString() + " 天 " : "") +
+      (hnum ? hnum.toString() + " 小时 " : "") +
+      (mnum ? mnum.toString() + " 分 " : "") +
+      (snum ? snum.toString() + " 秒" : "");
+  };
+  let timer = setInterval(getUptime, 250);
+
+  document.addEventListener(
+    "astro:before-swap",
+    () => {
+      clearInterval(timer);
+    },
+    { once: false },
+  );
+</script> -->
 
 - 2017.10.29 注册域名 skywt.top（现已注销）。
 - 2017.11.12 网站正式开始运行。由 WordPress 驱动。
@@ -92,6 +106,7 @@ setInterval("createtime()", 250);
 - 2023.06.28 注册备用的域名 skywt.net。
 - 2024.02.06 启用基于 Astro.js 开发的全新个人主页 Daydreamer。
 - 2024.03.02 个人主页集成 Typecho 博客，逐步从 blog.skywt.cn 迁移。
+- 2024.03.03 开始使用多吉云 CDN 加速。
 - ……
 
 ## 联系

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -28,15 +28,30 @@ import Rating from "../components/Rating.astro";
           滚动滚轮或滑动触控板继续浏览
           <i class="ri-arrow-down-line"></i>
         </p>
-        <script>
-          const showScrollHint = () => {
-            let scrollHintEle = document.querySelector(
-              "#scroll-hint",
-            ) as HTMLElement;
-            scrollHintEle.classList.add("fade-in");
-            scrollHintEle.classList.remove("opacity-0");
-          };
-          setTimeout(showScrollHint, 5000);
+        <script is:inline>
+          var hintTimer = null;
+          document.addEventListener(
+            "astro:page-load",
+            () => {
+              hintTimer = setTimeout(() => {
+                let scrollHintEle = document.querySelector("#scroll-hint");
+                if (scrollHintEle) {
+                  // 这里的写法不太好
+                  scrollHintEle.classList.add("fade-in");
+                  scrollHintEle.classList.remove("opacity-0");
+                }
+              }, 5000);
+            },
+            { once: false },
+          );
+          document.addEventListener(
+            "astro:before-swap",
+            () => {
+              clearTimeout(hintTimer);
+              hintTimer = null;
+            },
+            { once: false },
+          );
         </script>
         <p id="too-small-hint" class="mt-2 primary-color">
           <i class="ri-alert-line"></i> 本站针对屏幕宽度不小于 375 像素的设备设计。您的屏幕太小，页面可能无法正常显示。
@@ -159,11 +174,11 @@ import Rating from "../components/Rating.astro";
         </div>
       </div>
 
-      <script>
-        const uptime = document.getElementById("uptime") as HTMLElement;
+      <!-- <script is:inline>
+        const uptime = document.getElementById("uptime");
         const now = new Date();
         const grt = new Date("12/11/2017 11:00:00");
-        const getUptime: () => void = () => {
+        const getUptime = () => {
           now.setTime(now.getTime() + 250);
           const diff = now.getTime() - grt.getTime();
           const dnum = Math.floor(diff / 1000 / 60 / 60 / 24);
@@ -181,8 +196,16 @@ import Rating from "../components/Rating.astro";
             (mnum ? mnum.toString() + " 分 " : "") +
             (snum ? snum.toString() + " 秒" : "");
         };
-        setInterval(getUptime, 250);
-      </script>
+        let timer = setInterval(getUptime, 250);
+
+        document.addEventListener(
+          "astro:before-swap",
+          () => {
+            clearInterval(timer);
+          },
+          { once: false },
+        );
+      </script> -->
     </section>
   </main>
 </Layout>