React 窗口防抖

假如有这种需求：浏览器的窗口不断缩小变大，此时页面的布局不会自动刷新，需要手动刷新页面才会自适应大小。此时我们立马就会想到使用windows的onresize方法

window.onresize = ()=>{
       // 重新渲染画面
      root.render(<App/>)
}

但是新的问题就会出现这个onresize方法会被调用多次，多次渲染页面会造成资源浪费，于是我们就需要使用防抖函数

防抖函数

简单理解为：降低本来高频率执行函数的执行次数

完整的代码如下：

const root = ReactDom.createRoot(document.getElementById('container'));
 
//第一次渲染
root.render(
        <APP/>
)
 
// 窗口防抖
let timeId = null
window.onresize = ()=>{
    debounce(()=>{
        root.render(<App/>)
    },1000,timeId)
}
 
/**
 * 为什么做到了防抖，并且定时器不会一直执行，场景：多次触发onresize方法胡回调debounce方法：
 *      1. 第一次会有一个定时器执行，如果没执行到timerId = null，后续的回调函数就会一直消除+不创建定时器
 *      2. 直到执行到timerId = null，此时后面回调debounce方法，才会创建。为什么定时器执行，没有一直运行
 *      3. 就是通过回调的频率以及定时器的执行时间，具体就是某一个时间点：T1定时器执行到timerId = null进入等待，而同时回调debounce，删除T1定时器，判断为false没有创建定时器，函数结束。这个时间点大概率就是最后一次调用debounce方法
 * @param func 要执行的函数
 * @param delay 延迟时间
 * @param timerId  定时器ID
 */
function debounce(func, delay,timerId) {
    clearInterval(timerId)
    if(!timerId) {
        timerId = setInterval(() => {
            func()   // 实际可能树未渲染完毕/不渲染 可以使用window.location.reload();刷新页面
            timerId = null
        }, delay);
    }
}