窗口响应式函数仅页面加载时生效问题求助及代码重构建议

核心问题分析 #

你的代码存在几个关键问题，导致函数仅在页面加载时生效：

1. 媒体查询的匹配状态仅在初始化时获取，窗口resize时不会更新，判断条件始终停留在初始值；
2. dropdown_div、div_left等变量作用域被限制在if块内，跨块访问会引发未定义错误；
3. 未正确绑定resize事件，且缺少防抖处理（频繁resize会导致不必要的性能消耗）；
4. 屏幕尺寸恢复时，仅移除子元素未将其放回原容器，会导致元素丢失。

修复后的代码 #

// 缓存关键DOM元素，避免重复查询
const $topbar = $('.topbar');
let $divLeft = $topbar.children().eq(0);
let $dropdownDiv = null;

function go() {
    const isMobile = window.matchMedia("(max-width:600px)").matches;
    const isDesktop = window.matchMedia("(min-width:600px)").matches;

    if (isMobile) {
        // 仅当下拉容器未创建时执行操作
        if (!$dropdownDiv) {
            // 用jQuery简化DOM创建与样式添加
            $dropdownDiv = $('<div>').addClass('left-side dropdown_content_500px');
            // 将目标元素移动到新容器
            $divLeft.detach().appendTo($dropdownDiv);
            $('body').prepend($dropdownDiv);
        }
    } else if (isDesktop && $dropdownDiv) {
        // 屏幕尺寸恢复时，将元素放回原容器
        $divLeft.detach().prependTo($topbar);
        // 移除临时容器并重置状态
        $dropdownDiv.remove();
        $dropdownDiv = null;
    }
}

// 页面加载时执行初始化
go();

// 绑定resize事件，添加防抖避免频繁触发
let resizeTimer;
$(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(go, 200);
});

重构建议 #

• 缓存DOM元素：提前缓存.topbar和目标子元素，避免每次函数调用都重复查询DOM，提升运行效率；
• 统一变量命名：用jQuery风格的$前缀区分jQuery对象和原生DOM对象，降低代码混淆概率；
• 增加状态判断：执行DOM操作前先检查元素是否存在（如$dropdownDiv），避免重复创建或无效移除；
• 防抖处理resize：resize事件触发频率极高，用定时器延迟执行函数，减少不必要的DOM操作；
• 保证逻辑可逆：确保屏幕尺寸切换时，元素能正确回到初始位置，避免元素丢失；
• 简化DOM操作：利用jQuery的API（如appendTo、prependTo）替代原生DOM方法，让代码更简洁易读。

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