点击save按钮修改style.display未立即生效，再次打开editor div才生效怎么解决

• 浏览器的JS执行和UI渲染共享主线程，同一段同步JS代码执行过程中，所有DOM修改只会暂存在内存中，等当前所有同步任务执行完成后才会统一触发UI重绘更新页面
• 你当前代码中修改按钮样式后，马上执行了save2DDrawing()、exportInformation()等计算逻辑，最后直接将surfaceEditor设为隐藏，按钮样式的更新还没来得及渲染到页面，编辑器就被隐藏了，因此看不到切换效果

将后续的业务逻辑放到setTimeout中异步执行，给浏览器留出UI重绘的时间，修改后的代码如下：

function saveEditor() {
    // 先修改按钮样式
    document.getElementById('cancelButton').style.display = "none";
    document.getElementById('saveButton').style.display = "none";
    document.getElementById('loadButton').style.display = "inline";

    // 后续逻辑放入setTimeout，延迟0ms即可让浏览器先完成UI重绘再执行
    setTimeout(() => {
        save2DDrawing();    
        var json = exportInformation();
        console.log("exportInformation = "+json);
        surfaceEditor.style.display = "none";     
        loadUpdatedEnclosure(json);
    }, 0)
}

• 点击save按钮时的效果：
  
• 再次打开编辑器时的效果：
  

内容的提问来源于stack exchange，提问作者Bhavin S.