鼠标拖拽调整侧边栏宽度延迟问题求助

导致延迟的核心问题 #

1. mousedown/mouseup加节流纯属画蛇添足：这俩是瞬时触发的事件，节流会让mousedown=true和mousedown=false的状态更新慢半拍，直接拖垮拖拽启动和停止的响应速度。
2. mousemove节流间隔太大：100ms的间隔意味着每100ms才更新一次宽度，视觉上必然卡顿，远低于60fps（约16ms）的流畅标准。
3. 宽度计算逻辑有问题：拖拽时始终用最开始的initialsidebarWidth算新宽度，加上relative在mousemove里初始化，很容易出现计算偏差。
4. 全局window事件监听太冗余：把事件绑在整个window上，会触发大量没必要的处理，徒增性能开销。

修复后的代码 #

let isDragging = false;
let startX = 0;
let startSidebarWidth = 0;
const sidebarWidthVar = '--sidebarWidth';
const cursorMargin = 5;

// 初始化获取侧边栏宽度
let currentSidebarWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(sidebarWidthVar));

// 节流函数保留，把间隔调到16ms（接近屏幕60fps的刷新间隔）
const throttle = (func, delay = 16) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
};

// 建议给侧边栏加个专门的拖拽手柄（比如<div class="sidebar-resizer"></div>），绑定mousedown更精准
// 如果没有手柄，就绑定在侧边栏元素上，只在边缘触发拖拽
$('.sidebar').on('mousedown', (e) => {
  const sidebarRect = e.target.getBoundingClientRect();
  // 只在侧边栏右侧边缘5px范围内触发拖拽
  if (e.clientX > sidebarRect.right - cursorMargin) {
    isDragging = true;
    startX = e.pageX;
    startSidebarWidth = currentSidebarWidth;
    e.preventDefault(); // 防止拖拽时选中文本
  }
});

$(window).on('mouseup', () => {
  isDragging = false;
  // 拖拽结束后更新当前宽度，确保下次拖拽用最新值
  currentSidebarWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(sidebarWidthVar));
});

$(window).on('mousemove', throttle((e) => {
  if (!isDragging) {
    // 非拖拽状态下只处理光标样式
    const sidebarRect = $('.sidebar')[0].getBoundingClientRect();
    const isInResizeArea = e.clientX > sidebarRect.right - cursorMargin && e.clientX < sidebarRect.right + cursorMargin;
    $('html').css('cursor', isInResizeArea ? 'ew-resize' : 'auto');
    return;
  }

  // 计算新宽度：基于拖拽起始时的宽度 + 鼠标偏移量
  const newWidth = startSidebarWidth + (e.pageX - startX);
  // 可以加个最小宽度限制，避免侧边栏太窄
  const clampedWidth = Math.max(50, newWidth);
  document.documentElement.style.setProperty(sidebarWidthVar, `${clampedWidth}px`);
}));

额外优化点 #

• 新增拖拽手柄：单独做一个3-5px宽的拖拽条，绑定mousedown事件，比监听侧边栏边缘更精准，还能避免误触发。
• 减少getComputedStyle调用：只在初始化和拖拽结束时读取计算样式，拖拽过程中用变量记录宽度，避免频繁读取的性能损耗。
• 添加宽度限制：设置最小/最大宽度，防止拖拽时宽度异常影响页面布局。

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