如何让浏览器最大化/最小化时触发displayWindowSize函数调整图标尺寸？

看起来你的代码已经尝试用jQuery的resize事件处理窗口缩放，但窗口最大化/最小化时没生效，大概率是因为浏览器在这些操作时的resize事件触发逻辑和拖动窗口边缘不同，或者简单的setTimeout没有很好适配这种场景。咱们可以通过几个优化点来解决：

1. 改用防抖函数（Debounce） #

简单的setTimeout可能会在窗口状态快速变化时导致多次执行，或者错过正确的尺寸更新时机。防抖函数可以确保在窗口调整动作完全结束后再执行尺寸调整逻辑，更稳定可靠。

2. 监听额外的窗口状态事件 #

除了resize，我们还可以监听visibilitychange事件——当窗口从最小化恢复可见时，这个事件会触发，能覆盖resize没捕捉到的场景。

3. 确保初始化执行 #

页面加载完成后一定要执行一次displayWindowSize，保证初始状态下图标尺寸是正确的。

改进后的完整代码： #

$(document).ready(function() {
    // 防抖函数：确保事件结束后只执行一次
    function debounce(func, wait) {
        let timeout;
        return function() {
            const context = this;
            const args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    }

    function displayWindowSize() {
        const tpReportWidth = $("#tpReport").width();
        const newIconWidth = Math.round(tpReportWidth / 49.6).toFixed(2);
        console.log(`tpReportWidth: ${tpReportWidth}, newIconWidth: ${newIconWidth}`);
        $("#switch_icon").attr({
            'height': newIconWidth,
            'width': newIconWidth
        });
    }

    // 用防抖包装resize事件处理函数
    const debouncedDisplay = debounce(displayWindowSize, 150);

    // 监听resize事件
    $(window).resize(debouncedDisplay);

    // 监听窗口从最小化恢复的情况
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            debouncedDisplay();
        }
    });

    // 页面加载完成后初始化执行
    displayWindowSize();
});

关键改进点说明： #

• 防抖函数：避免窗口调整过程中多次执行displayWindowSize，只在调整停止150ms后执行一次，既保证响应速度又避免冗余计算。
• visibilitychange事件：当窗口从最小化状态恢复可见时，强制触发尺寸调整，覆盖resize事件没触发的场景。
• 初始化执行：页面加载完成后立刻调整图标尺寸，确保初始状态正确。
• attr方法优化：用对象形式一次性设置width和height，代码更简洁。

你可以把这段代码替换掉原来的脚本部分，测试一下最大化/最小化按钮的效果，应该就能正常触发尺寸调整了。

内容的提问来源于stack exchange，提问作者window