解决CSS变量控制面板实时拖拽缩放延迟的性能优化指南

.sidebar {
    width: var(--sidebarWidth, 250px);
    transition: width 0.5s ease-out; /* 导致延迟的根源 */
}

.sidebar {
    width: var(--sidebarWidth, 250px);
    /* 默认过渡，用于折叠/展开等动画 */
    transition: width 0.3s ease-in-out; 
}

.sidebar.no-transition {
    transition: none !important; /* 在拖拽时禁用过渡 */
}

// 假设这是你的侧边栏元素
const sidebar = document.querySelector('.sidebar'); 
const html = document.documentElement;

let isResizing = false;
let initialSidebarWidth = 0;
let startX = 0;

// 鼠标按下事件：开始拖拽
sidebar.addEventListener('mousedown', (e) => {
    // 检查是否在可拖拽区域（例如，边框区域）
    // 这里简化处理，假设点击侧边栏边缘即可拖拽
    const rect = sidebar.getBoundingClientRect();
    const cursorMargin = 10; // 拖拽感应区域宽度
    if (e.clientX > rect.right - cursorMargin && e.clientX < rect.right + cursorMargin) {
        isResizing = true;
        startX = e.clientX;
        // 获取当前计算出的宽度作为拖拽基准
        initialSidebarWidth = parseFloat(getComputedStyle(html).getPropertyValue('--sidebarWidth'));

        // 禁用过渡效果，确保实时更新
        sidebar.classList.add('no-transition');
        html.style.cursor = 'ew-resize'; // 改变鼠标样式

        // 绑定mousemove和mouseup到document，防止鼠标移出元素后事件丢失
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
        e.preventDefault(); // 阻止默认的文本选择等行为
    }
});

// 鼠标移动事件：实时调整宽度
const handleMouseMove = (e) => {
    if (!isResizing) return;

    const deltaX = e.clientX - startX;
    let newWidth = initialSidebarWidth + deltaX;

    // 可以添加最小/最大宽度限制
    newWidth = Math.max(100, newWidth); // 最小宽度100px
    newWidth = Math.min(500, newWidth); // 最大宽度500px

    html.style.setProperty('--sidebarWidth', `${newWidth}px`);
};

// 鼠标松开事件：结束拖拽
const handleMouseUp = () => {
    isResizing = false;

    // 恢复过渡效果
    sidebar.classList.remove('no-transition');
    html.style.cursor = 'auto'; // 恢复鼠标样式

    // 移除事件监听器
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
};

// 改进后的鼠标移动事件节流（可选，但推荐用于复杂计算或大量DOM操作）
// const throttle = (func, delay) => {
//     let timeoutId;
//     let lastArgs;
//     let lastThis;
//     let lastExecutionTime = 0;

//     const throttled = function(...args) {
//         const now = Date.now();
//         lastArgs = args;
//         lastThis = this;

//         if (now - lastExecutionTime > delay) {
//             lastExecutionTime = now;
//             func.apply(lastThis, lastArgs);
//         } else if (!timeoutId) {
//             timeoutId = setTimeout(() => {
//                 lastExecutionTime = Date.now();
//                 timeoutId = null;
//                 func.apply(lastThis, lastArgs);
//             }, delay - (now - lastExecutionTime));
//         }
//     };
//     return throttled;
// };

// const throttledHandleMouseMove = throttle(handleMouseMove, 16); // 大约每秒60帧

// // 在mousedown中绑定 throttledHandleMouseMove
// document.addEventListener('mousemove', throttledHandleMouseMove);