问题核心分析 #

你遇到的问题本质是两个原因叠加导致的：

1. JavaScript 单线程特性：当你在输入回调中直接触发耗时计算时，浏览器的渲染线程会被 JavaScript 线程阻塞，来不及更新光标样式。
2. Focus 状态输入元素的样式优先级：输入元素处于 focus 状态时，浏览器的默认光标样式（如 text）权重会高于你设置的 body.waiting * 规则，即使使用 !important 也可能被覆盖。

而在 pointerup 回调中能正常工作，是因为此时元素没有处于 focus 状态，光标样式能直接生效，且浏览器有足够时间完成重绘。

解决方案 #

下面提供两种经过验证的实现方案，结合你的代码场景进行适配：

方案一：确保重绘时机 + 覆盖 Focus 元素样式

这是最直接的修复方式，既解决渲染阻塞问题，又确保输入元素在聚焦状态下也能显示等待光标。

1. 调整 CSS 规则

修改你的等待光标样式，明确覆盖 focus 状态的输入元素：

body.waiting * {
  cursor: wait !important;
}
/* 强制覆盖聚焦输入框的默认光标 */
body.waiting input:focus {
  cursor: wait !important;
}

2. 优化 JavaScript 执行逻辑

利用 requestAnimationFrame 确保浏览器先完成重绘，再执行耗时计算（避免阻塞渲染）：

// 以你的输入元素 change 回调为例
function handleInputChange() {
  // 1. 添等待光标样式类
  document.body.classList.add('waiting');

  // 2. 用 requestAnimationFrame 确保浏览器先重绘，再执行计算
  requestAnimationFrame(() => {
    // 3. 用 setTimeout 将计算放入宏任务队列，确保重绘彻底完成
    setTimeout(() => {
      try {
        plot(); // 你的耗时计算函数（原 ldc）
      } finally {
        // 4. 无论计算成功/失败，都移除等待样式
        document.body.classList.remove('waiting');
      }
    }, 0);
  });
}

// 绑定到输入元素（替换你现有输入框的 onchange 逻辑）
document.querySelectorAll('input[name="xmin"], input[name="xmax"], input[name="ymin"], input[name="ymax"]').forEach(input => {
  input.onchange = handleInputChange;
});

方案二：可选 - 结合 Blur 提升体验（可选）

如果你希望输入框失去焦点（避免用户在计算时继续输入），可以在重绘前执行 blur，并在计算完成后恢复焦点：

function handleInputChange(e) {
  const targetInput = e.target;
  document.body.classList.add('waiting');
  
  // 先让输入框失去焦点
  targetInput.blur();

  requestAnimationFrame(() => {
    setTimeout(() => {
      try {
        plot();
      } finally {
        document.body.classList.remove('waiting');
        // 计算完成后恢复焦点（可选，提升用户体验）
        targetInput.focus();
      }
    }, 0);
  });
}

为什么这能生效？ #

• requestAnimationFrame：会在浏览器下一次重绘前执行回调，此时等待光标样式已经被应用到DOM。
• setTimeout(..., 0)：将耗时计算放入宏任务队列，确保浏览器完成重绘后再执行计算，避免渲染被阻塞。
• 聚焦输入框的样式覆盖：通过 body.waiting input:focus 规则，强制覆盖浏览器默认的聚焦光标样式。

针对你现有代码的快速修改建议 #

1. 打开你的 iax.html 文件，找到输入框的 onchange 绑定逻辑（比如 xmin 等四个输入框）。
2. 替换为上述的 handleInputChange 函数。
3. 在 CSS 中添加 body.waiting input:focus 的样式规则。

修改后测试时，调整绘图限制输入框后，浏览器会先显示等待光标，再执行绘图计算，解决你当前的问题。

调试技巧 #

如果依然存在问题，可以通过 Chrome DevTools 排查：

1. 打开 Elements 面板，检查输入框的 computed 样式，确认 cursor 属性是否被设置为 wait。
2. 打开 Performance 面板录制操作，查看是否存在渲染阻塞，确认重绘是否在计算前完成。