fix: use throttle instead of debounce, closes #17

package.json

@@ -30,7 +30,6 @@
   "author": "egoist <0x142857@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "debounce": "^1.2.0",
     "element-in-view": "^0.1.0",
     "htm": "^3.0.4",
     "marked": "^1.0.0",
@@ -40,7 +39,6 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@types/debounce": "^1.2.0",
     "@types/marked": "^0.7.4",
     "@types/prismjs": "^1.16.1",
     "poi": "^12.8.0",

src/components/App.tsx

@@ -1,15 +1,14 @@
 import { h, FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import inView from 'element-in-view'
-import debounce from 'debounce'
 import { InstanceOptions } from '../docup'
 import { Navbar } from './Navbar'
 import { Sidebar } from './Sidebar'
 import { Main } from './Main'
 import { renderMarkdown, SidebarMenuItem } from '../markdown'
-import { loadLanguages, scrollToHash, updateURLHash } from '../utils'
+import { loadLanguages, scrollToHash, updateURLHash, throttle } from '../utils'
 
-const handleScroll = debounce(() => {
+const handleScroll = throttle(() => {
   const headings = document.querySelectorAll('.content .heading')
   for (let i = 0; i < headings.length; i++) {
     const heading = headings[i]

src/utils.ts

@@ -59,3 +59,39 @@ export async function loadLanguages(langs: string[]) {
     )
   )
 }
+
+/**
+ * Returns a new function that, when invoked, invokes `func` at most once per `wait` milliseconds.
+ * Taken from https://github.com/component/throttle/blob/master/index.js MIT licensed
+ *
+ * @param func Function to wrap.
+ * @param wait Number of milliseconds that must elapse between `func` invocations.
+ * @return A new function that wraps the `func` function passed in.
+ */
+
+export function throttle<T extends Function>(func: T, wait: number) {
+  // caching
+  let ctx: any | undefined,
+    args: IArguments | undefined,
+    rtn: Function | undefined,
+    timeoutID: number | undefined
+  let last = 0
+
+  return function (this: any) {
+    ctx = this
+    args = arguments
+    var delta = Date.now() - last
+    if (!timeoutID)
+      if (delta >= wait) call()
+      else timeoutID = self.setTimeout(call, wait - delta)
+    return rtn
+  }
+
+  function call() {
+    timeoutID = 0
+    last = +new Date()
+    rtn = func.apply(ctx, args)
+    ctx = undefined
+    args = undefined
+  }
+}

yarn.lock

@@ -984,11 +984,6 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/debounce@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
-  integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==
-
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -2577,11 +2572,6 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-debounce@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
-  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"