diff --git a/src/components/note/show-more-container.tsx b/src/components/note/show-more-container.tsx index 7078c015c..390593829 100644 --- a/src/components/note/show-more-container.tsx +++ b/src/components/note/show-more-container.tsx @@ -1,5 +1,6 @@ import styled from "@emotion/styled"; import { useEffect, useRef } from "react"; +import { debounce } from "../../helpers/function"; const StyledOverflowContainer = styled.div` overflow: hidden; @@ -30,7 +31,7 @@ export default function ShowMoreContainer({ children, ...props }: React.HTMLAttr const ref = useRef(null); useEffect(() => { - const update = () => { + const update = debounce(() => { if (!ref.current) return; const innerHeight = Array.from(ref.current.children).reduce( @@ -42,7 +43,7 @@ export default function ShowMoreContainer({ children, ...props }: React.HTMLAttr // add or remove the "overflow" class if (innerHeight > height && !ref.current.classList.contains("overflow")) ref.current.classList.add("overflow"); else if (ref.current.classList.contains("overflow")) ref.current.classList.remove("overflow"); - }; + }, 1000 / 60); update(); diff --git a/src/helpers/function.ts b/src/helpers/function.ts index 715fd95cd..5fa6f2a1a 100644 --- a/src/helpers/function.ts +++ b/src/helpers/function.ts @@ -1,15 +1,15 @@ // copied from https://dev.to/bwca/create-a-debounce-function-from-scratch-in-typescript-560m -export function debounce(fn: (args: A) => R, ms: number): (args: A) => Promise { +export function debounce(fn: (...args: A) => R, ms: number): (...args: A) => Promise { let timer: number; - const debouncedFunc = (args: A): Promise => + const debouncedFunc = (...args: A): Promise => new Promise((resolve) => { if (timer) { window.clearTimeout(timer); } timer = window.setTimeout(() => { - resolve(fn(args)); + resolve(fn(...args)); }, ms); });