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