如何在window.onresize函数中重新计算元素宽度

// 获取需要重新计算宽度的元素
const element = document.getElementById('myElement');

// 定义一个函数来重新计算元素的宽度
function recalculateWidth() {
    // 假设我们希望元素的宽度是窗口宽度的50%
    const newWidth = window.innerWidth * 0.5;
    element.style.width = newWidth + 'px';
}

// 在页面加载时立即调用一次，以确保初始宽度是正确的
recalculateWidth();

// 添加事件监听器来处理窗口大小变化
window.addEventListener('resize', recalculateWidth);

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

// 使用防抖函数来优化resize事件处理
window.addEventListener('resize', debounce(recalculateWidth, 100));

document.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById('myElement');
    if (element) {
        window.addEventListener('resize', recalculateWidth);
    }
});