巧用 setTimeout 解锁流畅拖拽体验：告别卡顿，尽享丝滑交互

2023-10-26 03:55:29

setTimeout 的奇妙之旅：从拖拽卡顿到浏览器性能优化

拖拽卡顿的罪魁祸首

想象一下，你在设计一个交互式菜单栏，允许用户拖动它来调整宽度。但是，当用户手速过快时，拖动就会出现令人不快的卡顿现象。这是怎么回事呢？

答案在于浏览器的渲染机制。浏览器每秒会重新渲染页面多次，称为帧率。当 DOM 元素（如菜单栏）在帧内发生变化时，浏览器必须重新计算布局和样式。这会导致性能瓶颈，特别是当变化频繁时，例如在快速拖动过程中。

setTimeout 的英雄登场

为了解决拖拽卡顿，我们可以求助于 JavaScript 的 setTimeout 函数。setTimeout 允许我们延迟一段代码的执行，直到指定的时间间隔后。通过将菜单栏宽度调整的操作延迟到下一帧执行，我们给了浏览器充足的时间来完成布局计算，从而避免卡顿。

实战应用

以下代码演示了如何使用 setTimeout 优化拖拽交互：

const menu = document.querySelector('.menu');

menu.addEventListener('mousedown', (e) => {
  // 记录鼠标按下时的位置
  const startX = e.clientX;

  // 监听鼠标移动事件
  document.addEventListener('mousemove', (e) => {
    // 计算鼠标移动的距离
    const deltaX = e.clientX - startX;

    // 使用 setTimeout 延迟宽度调整到下一帧
    setTimeout(() => {
      // 更新菜单栏的宽度
      menu.style.width = `${menu.offsetWidth + deltaX}px`;
    }, 0);
  });

  // 监听鼠标松开事件
  document.addEventListener('mouseup', () => {
    // 移除鼠标移动事件监听器
    document.removeEventListener('mousemove');
  });
});