feat:optimize useRafTimeout

alibaba · Mar 30, 2022 · a4d0e28 · a4d0e28
1 parent 68e11d8
commit a4d0e28
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/packages/hooks/src/useRafTimeout/index.en-US.md b/packages/hooks/src/useRafTimeout/index.en-US.md
@@ -5,7 +5,7 @@ nav:
 
 # useRafTimeout
 
-A hook implements with `requestAnimationFrame` for better performance. The API is consistent with `useTimeout`.
+A hook implements with `requestAnimationFrame` for better performance. The API is consistent with `useTimeout`. the advantage is that will not trigger function when the page is not rendering, such as page hiding or minimization.
 
 > `requestAnimationFrame` will automatically downgrade to `setTimeout` in node environment
 
@@ -30,7 +30,7 @@ useRafTimeout(
 
 ### Params
 
-| Property | Description                                                                                                                                                   | Type                    |
-|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------|
-| fn       | The function to be executed every `delay` milliseconds.                                                                                                       | `() => void`            |
-| delay    | The time in milliseconds, the timer should delay in between executions of the specified function. The timer will be cancelled if delay is set to `undefined`. | `number` \| `undefined` |
+| Property | Description                                                                                                            | Type                    |
+|----------|------------------------------------------------------------------------------------------------------------------------|-------------------------|
+| fn       | The function to be executed after `delay` milliseconds.                                                                | `() => void`            |
+| delay    | The number of milliseconds to wait before executing the function. The timer will be cancelled if delay is `undefined`. | `number` \| `undefined` |
diff --git a/packages/hooks/src/useRafTimeout/index.ts b/packages/hooks/src/useRafTimeout/index.ts
@@ -5,26 +5,25 @@ interface Handle {
   id: number | NodeJS.Timeout;
 }
 
-const setRafTimeout = function (callback: () => void, delay: number = 16.7): Handle {
+const setRafTimeout = function (callback: () => void, delay: number = 0): Handle {
   if (typeof requestAnimationFrame === typeof undefined) {
     return {
       id: setTimeout(callback, delay),
     };
   }
+
   const handle: Handle = {
     id: 0,
   };
 
-  const now = Date.now;
-  let startTime = now();
-  let endTime = startTime;
+  const startTime = new Date().getTime();
 
   const loop = () => {
-    handle.id = requestAnimationFrame(loop);
-    endTime = now();
-    if (endTime - startTime >= delay) {
+    const current = new Date().getTime();
+    if (current - startTime >= delay) {
       callback();
-      clearRafTimeout(handle);
+    } else {
+      handle.id = requestAnimationFrame(loop);
     }
   };
   handle.id = requestAnimationFrame(loop);

diff --git a/packages/hooks/src/useRafTimeout/index.zh-CN.md b/packages/hooks/src/useRafTimeout/index.zh-CN.md
@@ -5,7 +5,7 @@ nav:
 
 # useRafTimeout
 
-用 `requestAnimationFrame` 模拟实现 `setTimeout`，API 和 `useTimeout` 保持一致
+用 `requestAnimationFrame` 模拟实现 `setTimeout`，API 和 `useTimeout` 保持一致，好处是可以在页面不渲染的时候不触发函数执行，比如页面隐藏或最小化等。
 
 > Node 环境下 `requestAnimationFrame` 会自动降级到 `setTimeout`
 
@@ -30,7 +30,7 @@ useRafTimeout(
 
 ### Params
 
-| 参数    | 说明                                        | 类型                    |
-|---------|---------------------------------------------|-------------------------|
-| fn      | 要定时调用的函数                            | `() => void`            |
-| delay   | 间隔时间，当取值 `undefined` 时会停止计时器 | `number` \| `undefined` |
+| 参数  | 说明                                                                       | 类型                    |
+|-------|----------------------------------------------------------------------------|-------------------------|
+| fn    | 待执行函数                                                                 | `() => void`            |
+| delay | 定时时间（单位为毫秒）,支持动态变化，，当取值为 `undefined` 时会停止计时器 | `number` \| `undefined` |
diff --git a/packages/hooks/src/useTimeout/index.zh-CN.md b/packages/hooks/src/useTimeout/index.zh-CN.md
@@ -27,4 +27,4 @@ useTimeout(
 | 参数  | 说明                                                        | 类型                    |
 |-------|-------------------------------------------------------------|-------------------------|
 | fn    | 待执行函数                                                  | `() => void`            |
-| delay | 定时时间（单位为毫秒），当取值为 `undefined` 时会停止计时器 | `number` \| `undefined` |
+| delay | 定时时间（单位为毫秒）,支持动态变化，，当取值为 `undefined` 时会停止计时器 | `number` \| `undefined` |