refactor(core): CORE-04 scope initialization and make destruction reentrant-safe

packages/artplayer/src/events/index.js

@@ -1,3 +1,4 @@
+import { getScope } from '../lifecycle/instance'
 import clickInit from './clickInit'
 import gestureInit from './gestureInit'
 import globalInit from './globalInit'
@@ -7,9 +8,14 @@ import resizeInit from './resizeInit'
 import updateInit from './updateInit'
 import viewInit from './viewInit'
 
+const scopes = new WeakMap()
+
 export default class Events {
   constructor(art) {
     this.destroyEvents = new Set()
+    const scope = getScope(art)
+    scopes.set(this, scope)
+    scope.add(() => this.destroy())
     this.proxy = this.proxy.bind(this)
     this.hover = this.hover.bind(this)
 
@@ -28,6 +34,9 @@ export default class Events {
       return name.map(item => this.proxy(target, item, callback, option))
     }
 
+    if (scopes.get(this).closed)
+      return () => {}
+
     target.addEventListener(name, callback, option)
     const destroy = () => target.removeEventListener(name, callback, option)
     this.destroyEvents.add(destroy)

packages/artplayer/src/events/resizeInit.js

@@ -1,4 +1,5 @@
-import { debounce } from '../utils'
+import { getScope } from '../lifecycle/instance'
+import { timeout } from '../lifecycle/resources'
 
 export default function resizeInit(art, events) {
   const { option, constructor } = art
@@ -12,7 +13,12 @@ export default function resizeInit(art, events) {
     notice.show = ''
   })
 
-  const resizeFn = debounce(() => art.emit('resize'), constructor.RESIZE_TIME)
+  const scope = getScope(art)
+  let cancel = () => {}
+  const resizeFn = () => {
+    cancel()
+    cancel = timeout(scope, () => art.emit('resize'), constructor.RESIZE_TIME)
+  }
 
   art.on('window:orientationchange', () => resizeFn())
   art.on('window:resize', () => resizeFn())

packages/artplayer/src/events/updateInit.js

@@ -1,6 +1,10 @@
+import { getScope } from '../lifecycle/instance'
+import { animationFrame } from '../lifecycle/resources'
+
 export default function updateInit(art) {
   if (art.constructor.USE_RAF) {
-    let timer = null;
+    const scope = getScope(art)
+    let cancel = () => {};
 
     (function update() {
       if (art.playing) {
@@ -8,12 +12,12 @@ export default function updateInit(art) {
       }
 
       if (!art.isDestroy) {
-        timer = requestAnimationFrame(update)
+        cancel = animationFrame(scope, update)
       }
     })()
 
     art.on('destroy', () => {
-      cancelAnimationFrame(timer)
+      cancel()
     })
   }
 }