Merge pull request #640 from alibaba/fix/use-count-down

fix: useCountDown add remark
alibaba · Sep 8, 2020 · 8d7b468 · 8d7b468
2 parents c741da7 + 19e96f7
commit 8d7b468
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/packages/hooks/src/useCountDown/__tests__/index.test.ts b/packages/hooks/src/useCountDown/__tests__/index.test.ts
@@ -4,11 +4,11 @@ import useCountDown, { TDate, Options } from '../index';
 // https://github.com/facebook/jest/issues/2234
 jest.spyOn(Date, 'now').mockImplementation(() => 1479427200000);
 
-const init = (_targetDate?: TDate, _interval?: Options['intervalTime']) =>
-  renderHook(({ targetDate, intervalTime }) => useCountDown({ targetDate, intervalTime }), {
+const init = (_targetDate?: TDate, _interval?: Options['interval']) =>
+  renderHook(({ targetDate, interval }) => useCountDown({ targetDate, interval }), {
     initialProps: {
       targetDate: _targetDate,
-      intervalTime: _interval,
+      interval: _interval,
     },
   });
 

diff --git a/packages/hooks/src/useCountDown/demo/demo2.tsx b/packages/hooks/src/useCountDown/demo/demo2.tsx
@@ -20,7 +20,7 @@ export default () => {
         }}
         disabled={countdown !== 0}
       >
-        {countdown === 0 ? 'Start Interval' : `Reset After ${Math.ceil(countdown / 1000)}s`}
+        {countdown === 0 ? 'Start Interval' : `Reset After ${Math.round(countdown / 1000)}s`}
       </button>
       <button
         onClick={() => {

diff --git a/packages/hooks/src/useCountDown/index.en-US.md b/packages/hooks/src/useCountDown/index.en-US.md
@@ -32,7 +32,16 @@ const [countdown, setTargetDate, formattedRes] = useCountDown(
 );
 ```
 
-## Type defination
+**Remak**
+
+The precision of useCountDown is milliseconds, which may cause the following problems
+
+* Even if the interval time is set to 1000ms, the update interval of useCountDown may not be exactly 1000ms, but about 1000ms.
+* In the second demo, countdown is generally 499x milliseconds at the beginning, because the program execution is delayed.
+
+If you only need to be accurate to the second, you can use it like this `Math.round(countdown / 1000)`.
+
+## Type
 
 | Property      | Description              | Type                                            |
 | ------------- | ------------------------ | ----------------------------------------------- |

diff --git a/packages/hooks/src/useCountDown/index.ts b/packages/hooks/src/useCountDown/index.ts
@@ -4,7 +4,7 @@ export type TDate = Date | number | string | undefined;
 
 export type Options = {
   targetDate?: TDate;
-  intervalTime?: number;
+  interval?: number;
 };
 
 export interface FormattedRes {
@@ -37,7 +37,7 @@ const parseMs = (milliseconds: number): FormattedRes => {
 };
 
 const useCountdown = (options?: Options) => {
-  const { targetDate, intervalTime = 1000 } = options || {};
+  const { targetDate, interval = 1000 } = options || {};
 
   const [target, setTargetDate] = useState<TDate>(targetDate);
   const [timeLeft, setTimeLeft] = useState(() => calcLeft(target));
@@ -58,10 +58,10 @@ const useCountdown = (options?: Options) => {
       if (targetLeft === 0) {
         clearInterval(timer);
       }
-    }, intervalTime);
+    }, interval);
 
     return () => clearInterval(timer);
-  }, [target, intervalTime]);
+  }, [target, interval]);
 
   const formattedRes = useMemo(() => {
     return parseMs(timeLeft);

diff --git a/packages/hooks/src/useCountDown/index.zh-CN.md b/packages/hooks/src/useCountDown/index.zh-CN.md
@@ -20,6 +20,15 @@ group:
 
 <code src="./demo/demo2.tsx" />
 
+**说明**
+
+useCountDown 的精度为毫秒，可能会造成以下几个问题
+
+* 即使设置 interval 时间为 1000ms，useCountDown 每次更新间隔也**不一定**正好是 1000 ms，而是 1000 毫秒左右。
+* 在第二个 demo 中，countdown 开始一般是 499x 毫秒，因为程序执行有延迟。
+
+如果你的精度只要到秒就好了，可以这样用 `Math.round(countdown / 1000)`。
+
 ## API
 
 ```typescript
@@ -31,23 +40,23 @@ const [countdown, setTargetDate, formattedRes] = useCountDown(
 );
 ```
 
-## 类型定义
+## Type
 
 | 参数          | 说明                                | 类型                                            |
 | ------------- | ----------------------------------- | ----------------------------------------------- |
 | TDate         | 支持的时间格式                      | Date \| number \| string \| undefined   |
 | FormattedRes | 返回的原始结果, 均为大于等于0的数字 | { days, hours, minutes, seconds, milliseconds } |
 
 
-## 参数
+## Params
 
 | 参数      | 说明           | 类型                                                    | 默认值      |
 | --------- | -------------- | ------------------------------------------------------- | ----------- |
 | targetDate   | 未来时间     | `TDate`                                                 | `undefined` |
 | interval  | 变化时间间隔（毫秒）     | `number`                                                | `1000`      |
 
 
-### 返回值
+### Result
 
 | 参数            | 说明           | 类型                      |
 | --------------- | -------------- | ------------------------- |