函数控制排序遮罩元素显示/隐藏失效问题排查

你的问题核心是JavaScript单线程阻塞了浏览器渲染。虽然你在排序前执行了mydiv.style.display = "block"，但浏览器的UI渲染和JS执行共享同一个主线程——同步的排序函数会立刻占据主线程，导致浏览器根本没时间完成加载动画的重绘，等排序结束后又马上把div设为none，所以用户完全看不到中间的显示过程。

控制台能输出Display: block是因为JS确实执行了这条语句，但浏览器没机会把这个变化渲染到页面上。而手动在控制台执行时，主线程处于空闲状态，浏览器可以立刻完成渲染，所以能看到预期效果。

解决方案 #

要让浏览器有时间渲染加载动画，你需要把耗时的排序操作放到异步任务队列里，让主线程先处理完DOM渲染，再执行排序。最简单的方式是用setTimeout把排序代码延迟0ms执行（0ms不是真的等0秒，而是让浏览器先完成当前的渲染任务）。

1. 修复原函数的变量问题 #

原函数里重复声明starttime会覆盖传入的参数，先修正函数逻辑：

function showhidesortdiv(bool, starttime) {
  const mydiv = document.getElementById("sort_shade");
  if (bool) {
    console.log("Sort started");
    mydiv.style.display = "block";
    console.log("Display: " + mydiv.style.display);
    return new Date();
  } else { 
    console.log("Sort ended"); 
    mydiv.style.display = "none";
    console.log("Display: " + mydiv.style.display);
    const endtime = new Date(); 
    console.log("Sort duration: " + (endtime - starttime));
  }
}

2. 异步执行排序逻辑 #

修改排序的调用方式，让浏览器先渲染加载动画：

// 先显示加载动画
const startTime = showhidesortdiv(true);
// 让浏览器完成渲染后再执行排序
setTimeout(() => {
  // 替换成你的耗时排序函数
  sortYourTable();
  // 排序完成后隐藏动画
  showhidesortdiv(false, startTime);
}, 0);

额外优化方案 #

如果排序逻辑允许，使用Web Worker是更优的选择——Web Worker会在后台线程执行排序，完全不阻塞主线程的渲染，加载动画会更流畅。不过setTimeout的方式已经能解决大部分场景的问题。

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