fix(runtime-web): 修复父元素未完成挂载时尝试获取 DOM 节点及绑定事件可能会导致报错的问题 (#34)

* fix(runtime-web): 父元素未挂载时去获取，并且调用绑定事件导致报错 * feat(runtime-web): 将 1000/60 提取为常量，降低计算量
eleme · May 5, 2023 · 3227eeb · 3227eeb
1 parent 63f5e76
commit 3227eeb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/runtime-web/src/components/src/utils/index.ts b/packages/runtime-web/src/components/src/utils/index.ts
@@ -125,3 +125,11 @@ export const getCurrentPagePath = () => {
     return currentPage.path
   } catch (e) {}
 }
+
+const REFRESH_INTERVAL = 1000 / 60
+export const requestAnimationFrame = (callback) => {
+  if (typeof window.requestAnimationFrame === 'function')
+    return window.requestAnimationFrame(callback)
+
+  return setTimeout(callback, REFRESH_INTERVAL)
+}
diff --git a/packages/runtime-web/src/components/src/views/view/index.ts b/packages/runtime-web/src/components/src/views/view/index.ts
@@ -1,6 +1,7 @@
 import { css, html, property } from 'lit-element'
 import throttle from 'lodash.throttle'
 import { BaseElement } from '../../baseElement'
+import { requestAnimationFrame } from '../../utils'
 import BooleanConverter from '../../utils/bool-converter'
 import { findScrollParent, getElementVisibleRatio } from './helper'
 const preventHandle = (e) => {
@@ -43,12 +44,12 @@ export default class View extends BaseElement {
   }
 
   firstUpdated() {
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       // firstUpdated 触发时，addEventListener 方法不一定会收到组件注册的 appear，disappear 事件，根据lit官方提示，做延迟处理
       if (this.needBindAppear) {
         this.watchTouchMove()
       }
-    }, 0)
+    })
   }
 
   private scrollParent: Element = null