React-全屏、取消全屏及自适应防抖处理

---

前言

有些时候，我们需要在浏览器窗口发生变化的时候，动态的执行一些操作，比如做全屏，取消全屏及自适应页面时的适配。

---

一、html部分

//需要全屏的盒子
<div
	className={styles.box}
    id='box'
>
    {screens}
div>

//全屏事件
 fullscreen()}> 
   <SVGIcon iconClass="fullScreen" hoverClass="fullScreenGreen" width={14} height={14} />
div>

二、ts/js

1.全屏事件

//被触发的全屏事件
  const fullscreen = () => {
    if (isNotSave.current) {
      message.info('请先保存再进行操作！', 2)
    } else {
    //全屏操作及重新播放
      requestFullScreen();
    }
  }

  const requestFullScreen = async () => {
    var de = document.getElementById('box');
    if (de) {
      await de.requestFullscreen();
      //以下是由于我运用的场景是多屏监控，需重新播放
      cameraList.map((item, i) => {
        if (item.list !== null && item.list.length > 0) {
          for (let i = 0; i < item.list.length; i += 1) {
            let player = document.getElementById("dplayer" + i);
            if (player) {
              console.log(player);
              player.innerHTML = "";
              onPlay("dplayer" + i, item.list[i].data ? item.list[i].data.url : '', item.list[i].accessToken);
            }
          }
        }
      })
    }
  }

下面是一个全屏效果

2.取消全屏及防抖处理

由于chrome浏览器无法监听到Esc退出键的按键事件，因此我是对浏览器的大小改变的事件进行了监听。

 function checkFull() {
    var isFull = document.fullscreen;
    if (isFull === undefined) { isFull = false; }
    return isFull;
  }
 window.onresize = function () {
 	//检查全屏状态
    if (!checkFull()) {
      //要执行的动作
      console.log('我改变了');
    }
  }

为了确保在卸载时移除事件侦听器，以防止潜在的错误和内存泄漏，使用useEffect

const cancelFull = () => {
    if (!checkFull()) {
      //要执行的动作
      console.log('我改变了');
    }
  }

  useEffect(() => {
    window.addEventListener("resize", cancelFull, false);
    return () => {
      window.removeEventListener("resize", cancelFull, false);
    }
  }, [])

但是我们会发现，除了取消全屏，改变窗口大小时会多次触发onresize ，甚至造成页面崩溃。而其实，我们的需求只是需要在拖动窗口停止后再动态对页面进行改变。因此我们可以通过节流的方式，即在我们规定的时间内，不管窗口改变多少次，只进行一次操作，一般是第一次。
代码示例：

    let timer: any = null
    const throttle = (str: string,time:number) => {
        if (!timer) {
            timer = setTimeout(() => {
                message.info(str, 3);
                timer = null
            }, time)
        }
    }
    调用：throttle ('tip',500)

但由于用于我的页面上并不友好，所以我使用的是另一种方法：防抖。只有当他停下来之后，才会继续执行，即只执行一次，一般是最后一次

 //引入
 import _ from 'lodash'

 useEffect(() => {
    window.addEventListener("resize", _.debounce(cancelFull, 500), false);
    return () => {
      window.removeEventListener("resize", cancelFull, false);
    }
  }, [])