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

た入场券 2022-10-17 01:46 294阅读 0赞

### 文章目录 ###

*  前言
 *  一、html部分
 *  二、ts/js
 *   *  1.全屏事件
     *  2.取消全屏及防抖处理

--------------------

# 前言 #

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

--------------------

# 一、html部分 #

//需要全屏的盒子
    <div className={styles.box} id='box' >
        {screens}
    </div>
    
    //全屏事件
    <div className={styles.btn} onClick={() => 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);
                }
              }
            }
          })
        }
      }

下面是一个全屏效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]

## 2.取消全屏及防抖处理 ##

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

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

但是我们会发现，除了取消全屏，改变窗口大小时会多次触发onresize ，甚至造成页面崩溃。而其实，我们的需求只是需要在拖动窗口停止后再动态对页面进行改变。因此我们可以通过节流的方式，即通过增加定时器settimeout的方式来让代码延迟执行，这样每次窗口改变的时候，我们都清除事件，只有当他停下来之后，才会继续执行。  
代码示例：

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);
        }
      }, [])

在我们规定的时间内，不管窗口改变多少次，只对最后一次进行操作。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]: /images/20221014/42caf44de01f4b6594de709b38be1122.png