client: use throttle instead of debounce

This commit is contained in:
fantasticit 2022-05-26 12:45:45 +08:00
parent f2e4722557
commit c1db90aa21
12 changed files with 41 additions and 19 deletions

View File

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

View File

@ -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);
};
}

View File

@ -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;
};
}

View File

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

View File

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

View File

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