feat: add wait time props

examples/waitTime.tsx

@@ -0,0 +1,51 @@
+import '../assets/index.less';
+import React, { useState } from 'react';
+import ResizeObserver from '../src';
+
+export default function App() {
+  const [times, setTimes] = React.useState(0);
+  const [disabled, setDisabled] = React.useState(false);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const [debounce, setDebounce] = useState(100);
+  React.useEffect(() => {
+    console.log('Ref:', textareaRef.current);
+    setTimeout(() => {
+      setDebounce(10000);
+    }, 10000);
+  }, []);
+
+  const onResize = ({ width, height }: { width: number; height: number }) => {
+    setTimes(prevTimes => prevTimes + 1);
+    console.log('Resize:', width, height);
+  };
+
+  return (
+    <React.StrictMode>
+      <div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => {
+                setDisabled(!disabled);
+              }}
+              checked={disabled}
+            />{' '}
+            Disabled Observe
+          </label>
+          {' >>> '}
+          <span>Resize times: {times}</span>
+          <br />
+          debounce：{debounce}
+        </div>
+        <ResizeObserver
+          onResize={onResize}
+          disabled={disabled}
+          debounce={debounce}
+        >
+          <textarea ref={textareaRef} placeholder="I'm a textarea!" />
+        </ResizeObserver>
+      </div>
+    </React.StrictMode>
+  );
+}

src/index.tsx

@@ -10,6 +10,7 @@ const INTERNAL_PREFIX_KEY = 'rc-observer-key';
 interface ResizeObserverProps {
   children: React.ReactNode;
   disabled?: boolean;
+  debounce?: number;
   /** Trigger if element resized. Will always trigger when first time render. */
   onResize?: (size: { width: number; height: number }) => void;
 }
@@ -69,11 +70,40 @@ class ReactResizeObserver extends React.Component<
     }
 
     if (!this.resizeObserver && element) {
-      this.resizeObserver = new ResizeObserver(this.onResize);
+      this.resizeObserver = new ResizeObserver(this.debounce);
       this.resizeObserver.observe(element);
     }
   }
 
+  timeout: number | null = null;
+
+  timestamp: number = 0;
+
+  debounce: ResizeObserverCallback = (
+    entries: ResizeObserverEntry[],
+    observer: ResizeObserver,
+  ) => {
+    const { debounce = 0 } = this.props;
+    const { onResize } = this;
+
+    const callNow = !this.timeout;
+
+    if (callNow) {
+      onResize(entries, observer);
+    }
+
+    const last = Date.now() - this.timestamp;
+
+    if (last < debounce && last >= 0) {
+      this.timeout = window.setTimeout(() => {
+        this.debounce(entries, observer);
+      }, debounce - last);
+    } else {
+      this.timestamp = Date.now();
+      onResize(entries, observer);
+    }
+  };
+
   onResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
     const { onResize } = this.props;