js监听当前页面是否活跃/失活

1
// visibilitychange
2
const emptyCb = () => {}
3
class PageVisibilityChangeListener {
4
  private eventsMap: Map<[CB, CB], CB> = new Map()
5
  private listenerFn: (visibleCb: CB, hiddenCb: CB) => CB
6
  private visibilityChangeEventName: string
7
  constructor() {
8
    const hiddenProperty =
9
      'hidden' in document
10
        ? 'hidden'
11
        : 'webkitHidden' in document
12
        ? 'webkitHidden'
13
        : 'mozHidden' in document
14
        ? 'mozHidden'
15
        : null
16
    this.visibilityChangeEventName = hiddenProperty?.replace(/hidden/i, 'visibilitychange') || ''
17
    if (!hiddenProperty) console.log('页面激活状态监听失败')
18
    let lastTime = 0
19
    let timer = 0
20
    this.listenerFn = (visibleCb: CB, hiddenCb: CB) => (e) => {
21
      const t = new Date().getTime()
22
      if (t - lastTime < 50) {
23
        clearTimeout(timer)
24
        lastTime = t
25
        return
26
      }
27
      if (document.visibilityState === 'visible') {
28
        // @ts-ignore
29
        timer = setTimeout(() => visibleCb(e), 50)
30
      } else if (document.visibilityState === 'hidden') {
31
        // @ts-ignore
32
        timer = setTimeout(() => hiddenCb(e), 50)
33
      }
34
      lastTime = t
35
    }
36
  }
37
  on(visibleCb: CB | null, hiddenCb: CB | null) {
38
    if (!this.visibilityChangeEventName || (!visibleCb &amp;&amp; !hiddenCb)) return
39
    visibleCb = visibleCb || emptyCb
40
    hiddenCb = hiddenCb || emptyCb
41
    const fn = this.listenerFn(visibleCb, hiddenCb)
42
    this.eventsMap.set([visibleCb, hiddenCb], fn)
43
    listener.on(this.visibilityChangeEventName, fn)
44
  }
45
  off(visibleCb: CB | null, hiddenCb: CB | null) {
46
    if (!this.visibilityChangeEventName || (!visibleCb &amp;&amp; !hiddenCb)) return
47
    visibleCb = visibleCb || emptyCb
48
    hiddenCb = hiddenCb || emptyCb
49
    const fn = this.eventsMap.get([visibleCb, hiddenCb])
50
    fn &amp;&amp; listener.off(this.visibilityChangeEventName, fn)
51
  }
52
}
53
/** 监听页面失活 */
54
export const pageVisibilityChangeListener = new PageVisibilityChangeListener()
55
pageVisibilityChangeListener.on(
56
  () => console.log('页面复活'),
57
  () => console.log('页面失活')
58
)

1
// focus & blur
2
class PageVisibilityChangeListener {
3
  constructor() {}
4
  on(visibleCb: CB | null, hiddenCb: CB | null) {
5
    if (visibleCb) listener.on('focus', visibleCb)
6
    if (hiddenCb) listener.on('blur', hiddenCb)
7
  }
8
  off(visibleCb: CB | null, hiddenCb: CB | null) {
9
    if (visibleCb) listener.off('focus', visibleCb)
10
    if (hiddenCb) listener.off('blur', hiddenCb)
11
  }
12
}
13
/** 监听页面失活 */
14
export const pageVisibilityChangeListener = new PageVisibilityChangeListener()
15
pageVisibilityChangeListener.on(
16
  () => console.log('页面聚焦'),
17
  () => console.log('页面失焦')
18
)