client: use throttle instead of debounce

packages/client/src/components/grid-select/grid-select.tsx

@@ -1,5 +1,4 @@
 import { Typography } from '@douyinfe/semi-ui';
-import { debounce } from 'helpers/debounce';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { GridCell } from './grid-cell';

packages/client/src/helpers/debounce.tsx

@@ -1,12 +0,0 @@
-export function debounce(func, timeout = 200) {
-  let timer;
-  return (...args) => {
-    if (!timer) {
-      func.apply(this, args);
-    }
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      timer = undefined;
-    }, timeout);
-  };
-}

packages/client/src/helpers/throttle.ts

@@ -0,0 +1,35 @@
+export function throttle(func, wait, options?: { leading: boolean; trailing: boolean }) {
+  let context, args, result;
+  let timeout = null;
+  let previous = 0;
+
+  if (!options) options = { leading: true, trailing: true };
+
+  const later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+
+  return function () {
+    const now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    const remaining = wait - (now - previous);
+    context = this;
+    // eslint-disable-next-line prefer-rest-params
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+}

packages/client/src/layouts/double-column/index.tsx

@@ -1,7 +1,7 @@
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
 import cls from 'classnames';
-import { debounce } from 'helpers/debounce';
+import { throttle } from 'helpers/throttle';
 import { useDragableWidth } from 'hooks/use-dragable-width';
 import React, { useMemo } from 'react';
 import SplitPane from 'react-split-pane';
@@ -18,7 +18,7 @@ interface IProps {
 
 export const DoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
-  const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
+  const debounceUpdate = useMemo(() => throttle(updateWidth, 200), [updateWidth]);
 
   return (
     <SemiLayout className={styles.wrap}>

packages/client/src/layouts/public-double-column/index.tsx

@@ -1,7 +1,7 @@
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import { Button, Layout as SemiLayout } from '@douyinfe/semi-ui';
 import cls from 'classnames';
-import { debounce } from 'helpers/debounce';
+import { throttle } from 'helpers/throttle';
 import { useDragableWidth } from 'hooks/use-dragable-width';
 import React, { useMemo } from 'react';
 import SplitPane from 'react-split-pane';
@@ -17,7 +17,7 @@ interface IProps {
 
 export const PublicDoubleColumnLayout: React.FC<IProps> = ({ leftNode, rightNode }) => {
   const { minWidth, maxWidth, width, isCollapsed, updateWidth, toggleCollapsed } = useDragableWidth();
-  const debounceUpdate = useMemo(() => debounce(updateWidth, 200), [updateWidth]);
+  const debounceUpdate = useMemo(() => throttle(updateWidth, 200), [updateWidth]);
 
   return (
     <SemiLayout className={styles.wrap}>

packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx

@@ -1,7 +1,7 @@
 import { Spin, Typography } from '@douyinfe/semi-ui';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import { DataRender } from 'components/data-render';
-import { debounce } from 'helpers/debounce';
+import { throttle } from 'helpers/throttle';
 import { useToggle } from 'hooks/use-toggle';
 import { SecureDocumentIllustration } from 'illustrations/secure-document';
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -46,7 +46,7 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
         docType: type,
       },
       maxAttempts: 1,
-      onAwarenessUpdate: debounce(({ states }) => {
+      onAwarenessUpdate: throttle(({ states }) => {
         const users = states.map((state) => ({ clientId: state.clientId, user: state.user }));
         onAwarenessUpdate && onAwarenessUpdate(users);
       }, 200),