feat(scroll): 新增函数防抖，处理滚动事件触发频率

Lete114 · Apr 19, 2022 · 1849c5f · 1849c5f
1 parent 28e271e
commit 1849c5f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/source/js/main.js b/source/js/main.js
@@ -177,36 +177,39 @@ function DarkMode() {
 function scroll() {
   // 监听 scroll
   var windowTop = 0 // 定义初始位置
-  window.addEventListener('scroll', function () {
-    var winHeight = document.documentElement.clientHeight
-    var scrollTop = window.scrollY || document.documentElement.scrollTop
-
-    // 头部导航栏
-    var navbar = $query('.navbar')
-    if (scrollTop > windowTop) {
-      navbar.style.transform = 'translateY(-60px)'
-      windowTop = scrollTop
-    } else {
-      navbar.style.transform = ''
-      windowTop = scrollTop
-    }
+  window.addEventListener(
+    'scroll',
+    throttle(function () {
+      var winHeight = document.documentElement.clientHeight
+      var scrollTop = window.scrollY || document.documentElement.scrollTop
+
+      // 头部导航栏
+      var navbar = $query('.navbar')
+      if (scrollTop > windowTop) {
+        navbar.style.transform = 'translateY(-60px)'
+        windowTop = scrollTop
+      } else {
+        navbar.style.transform = ''
+        windowTop = scrollTop
+      }
 
-    // toc目录百分比
-    var article = $query('.post-content')
-    var num = $query('.num')
-    if (article && num) {
-      var headerHeight = article.offsetTop
-      var docHeight = article.clientHeight
+      // toc目录百分比
+      var article = $query('.post-content')
+      var num = $query('.num')
+      if (article && num) {
+        var headerHeight = article.offsetTop
+        var docHeight = article.clientHeight
 
-      var contentMath = docHeight > winHeight ? docHeight - winHeight : document.documentElement.scrollHeight - winHeight
-      var scrollPercent = (scrollTop - headerHeight) / contentMath
-      var scrollPercentRounded = Math.round(scrollPercent * 100)
-      var percentage = scrollPercentRounded > 100 ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded
+        var contentMath = docHeight > winHeight ? docHeight - winHeight : document.documentElement.scrollHeight - winHeight
+        var scrollPercent = (scrollTop - headerHeight) / contentMath
+        var scrollPercentRounded = Math.round(scrollPercent * 100)
+        var percentage = scrollPercentRounded > 100 ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded
 
-      num.innerText = percentage + '%'
-      $query('.progress').value = percentage
-    }
-  })
+        num.innerText = percentage + '%'
+        $query('.progress').value = percentage
+      }
+    }, 100)
+  )
 }
 
 // 代码块复制

diff --git a/source/js/utlis.js b/source/js/utlis.js
@@ -103,3 +103,20 @@ function ajax(obj) {
     }
   }
 }
+
+/**
+ * 防抖节流(闭包)
+ * @param callback 事件触发的操作
+ * @param wait 在多少毫秒内连续触发事件，重新计数
+ * @returns {Function}
+ */
+function throttle(callback, wait) {
+  var pre = 0
+  return function () {
+    var now = new Date()
+    if (now - pre > wait) {
+      callback.apply(this, arguments)
+      pre = now
+    }
+  }
+}