From 15e6b322858b7555d97c7c5660a1ff33fda36473 Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Wed, 8 Jan 2020 09:21:17 +0800
Subject: [PATCH 1/3] add debounce

---
 src/util.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/util.js

diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..2775b1c
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,42 @@
+/* eslint-disable no-multi-assign */
+/* eslint-disable no-var */
+/* eslint-disable func-names */
+export const debounce = function(func, wait, immediate) {
+  // immediate默认为false
+  let timeout;
+  let args;
+  let context;
+  let timestamp;
+  let result;
+
+  var later = function() {
+    const last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      }
+    }
+  };
+
+  return function() {
+    context = this;
+    // eslint-disable-next-line prefer-rest-params
+    args = arguments;
+    timestamp = Date.now();
+    // 第一次调用该方法时，且immediate为true，则调用func函数
+    const callNow = immediate && !timeout;
+    // 在wait指定的时间间隔内首次调用该方法，则启动计时器定时调用func函数
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+};

From d57b73055354a7f347c6ef437d916ad536fb4df0 Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Wed, 8 Jan 2020 21:14:08 +0800
Subject: [PATCH 2/3] feat:finish waitTime

---
 examples/waitTime.tsx    | 42 ++++++++++++++++++++++++++++++++++++++++
 src/index.tsx            | 10 ++++++++--
 src/{util.js => util.ts} | 21 +++++++++++---------
 3 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 examples/waitTime.tsx
 rename src/{util.js => util.ts} (68%)

diff --git a/examples/waitTime.tsx b/examples/waitTime.tsx
new file mode 100644
index 0000000..66033f8
--- /dev/null
+++ b/examples/waitTime.tsx
@@ -0,0 +1,42 @@
+import '../assets/index.less';
+import React 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);
+
+  React.useEffect(() => {
+    console.log('Ref:', textareaRef.current);
+  }, []);
+
+  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>
+        </div>
+        <ResizeObserver onResize={onResize} disabled={disabled} waitTime={100}>
+          <textarea ref={textareaRef} placeholder="I'm a textarea!" />
+        </ResizeObserver>
+      </div>
+    </React.StrictMode>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index b45f14a..74b5f77 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,12 +4,14 @@ import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
 import { composeRef, supportRef } from 'rc-util/lib/ref';
 import ResizeObserver from 'resize-observer-polyfill';
+import { debounce } from './util';
 
 const INTERNAL_PREFIX_KEY = 'rc-observer-key';
 
 interface ResizeObserverProps {
   children: React.ReactNode;
   disabled?: boolean;
+  waitTime?: number;
   /** Trigger if element resized. Will always trigger when first time render. */
   onResize?: (size: { width: number; height: number }) => void;
 }
@@ -39,7 +41,11 @@ class ReactResizeObserver extends React.Component<
     height: 0,
   };
 
+  onDebounceResize: ResizeObserverCallback | null = null;
+
   componentDidMount() {
+    const { waitTime = 10 } = this.props;
+    this.onDebounceResize = debounce(this.onResize, waitTime);
     this.onComponentUpdated();
   }
 
@@ -68,8 +74,8 @@ class ReactResizeObserver extends React.Component<
       this.currentElement = element;
     }
 
-    if (!this.resizeObserver && element) {
-      this.resizeObserver = new ResizeObserver(this.onResize);
+    if (!this.resizeObserver && element && this.onDebounceResize) {
+      this.resizeObserver = new ResizeObserver(this.onDebounceResize);
       this.resizeObserver.observe(element);
     }
   }
diff --git a/src/util.js b/src/util.ts
similarity index 68%
rename from src/util.js
rename to src/util.ts
index 2775b1c..06baf86 100644
--- a/src/util.js
+++ b/src/util.ts
@@ -1,13 +1,17 @@
 /* eslint-disable no-multi-assign */
 /* eslint-disable no-var */
 /* eslint-disable func-names */
-export const debounce = function(func, wait, immediate) {
+export const debounce = function(
+  func: Function,
+  wait: number,
+  immediate?: any,
+) {
   // immediate默认为false
-  let timeout;
-  let args;
-  let context;
-  let timestamp;
-  let result;
+  let timeout: NodeJS.Timeout | null;
+  let args: IArguments | null;
+  let context: null;
+  let timestamp: number;
+  let result: any;
 
   var later = function() {
     const last = Date.now() - timestamp;
@@ -17,20 +21,19 @@ export const debounce = function(func, wait, immediate) {
     } else {
       timeout = null;
       if (!immediate) {
-        result = func.apply(context, args);
+        result = func.apply(context, args as any);
         if (!timeout) context = args = null;
       }
     }
   };
 
   return function() {
+    // @ts-ignore
     context = this;
     // eslint-disable-next-line prefer-rest-params
     args = arguments;
     timestamp = Date.now();
-    // 第一次调用该方法时，且immediate为true，则调用func函数
     const callNow = immediate && !timeout;
-    // 在wait指定的时间间隔内首次调用该方法，则启动计时器定时调用func函数
     if (!timeout) timeout = setTimeout(later, wait);
     if (callNow) {
       result = func.apply(context, args);

From 68180cadcde0972ae5e43b753071f4aecdf0f627 Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 13 Jan 2020 14:58:04 +0800
Subject: [PATCH 3/3] refactoring the code

---
 examples/waitTime.tsx | 15 ++++++++++++---
 src/index.tsx         | 40 ++++++++++++++++++++++++++++++--------
 src/util.ts           | 45 -------------------------------------------
 3 files changed, 44 insertions(+), 56 deletions(-)
 delete mode 100644 src/util.ts

diff --git a/examples/waitTime.tsx b/examples/waitTime.tsx
index 66033f8..1f94f19 100644
--- a/examples/waitTime.tsx
+++ b/examples/waitTime.tsx
@@ -1,14 +1,17 @@
 import '../assets/index.less';
-import React from 'react';
+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 }) => {
@@ -32,8 +35,14 @@ export default function App() {
           </label>
           {' >>> '}
           <span>Resize times: {times}</span>
+          <br />
+          debounce：{debounce}
         </div>
-        <ResizeObserver onResize={onResize} disabled={disabled} waitTime={100}>
+        <ResizeObserver
+          onResize={onResize}
+          disabled={disabled}
+          debounce={debounce}
+        >
           <textarea ref={textareaRef} placeholder="I'm a textarea!" />
         </ResizeObserver>
       </div>
diff --git a/src/index.tsx b/src/index.tsx
index 74b5f77..c5e59a3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,14 +4,13 @@ import toArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
 import { composeRef, supportRef } from 'rc-util/lib/ref';
 import ResizeObserver from 'resize-observer-polyfill';
-import { debounce } from './util';
 
 const INTERNAL_PREFIX_KEY = 'rc-observer-key';
 
 interface ResizeObserverProps {
   children: React.ReactNode;
   disabled?: boolean;
-  waitTime?: number;
+  debounce?: number;
   /** Trigger if element resized. Will always trigger when first time render. */
   onResize?: (size: { width: number; height: number }) => void;
 }
@@ -41,11 +40,7 @@ class ReactResizeObserver extends React.Component<
     height: 0,
   };
 
-  onDebounceResize: ResizeObserverCallback | null = null;
-
   componentDidMount() {
-    const { waitTime = 10 } = this.props;
-    this.onDebounceResize = debounce(this.onResize, waitTime);
     this.onComponentUpdated();
   }
 
@@ -74,12 +69,41 @@ class ReactResizeObserver extends React.Component<
       this.currentElement = element;
     }
 
-    if (!this.resizeObserver && element && this.onDebounceResize) {
-      this.resizeObserver = new ResizeObserver(this.onDebounceResize);
+    if (!this.resizeObserver && element) {
+      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;
 
diff --git a/src/util.ts b/src/util.ts
deleted file mode 100644
index 06baf86..0000000
--- a/src/util.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable no-multi-assign */
-/* eslint-disable no-var */
-/* eslint-disable func-names */
-export const debounce = function(
-  func: Function,
-  wait: number,
-  immediate?: any,
-) {
-  // immediate默认为false
-  let timeout: NodeJS.Timeout | null;
-  let args: IArguments | null;
-  let context: null;
-  let timestamp: number;
-  let result: any;
-
-  var later = function() {
-    const last = Date.now() - timestamp;
-
-    if (last < wait && last >= 0) {
-      timeout = setTimeout(later, wait - last);
-    } else {
-      timeout = null;
-      if (!immediate) {
-        result = func.apply(context, args as any);
-        if (!timeout) context = args = null;
-      }
-    }
-  };
-
-  return function() {
-    // @ts-ignore
-    context = this;
-    // eslint-disable-next-line prefer-rest-params
-    args = arguments;
-    timestamp = Date.now();
-    const callNow = immediate && !timeout;
-    if (!timeout) timeout = setTimeout(later, wait);
-    if (callNow) {
-      result = func.apply(context, args);
-      context = args = null;
-    }
-
-    return result;
-  };
-};