假如有这种需求：浏览器的窗口不断缩小变大，此时页面的布局不会自动刷新，需要手动刷新页面才会自适应大小。此时我们立马就会想到使用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);
}
}
