调用startScan后模态框无法显示，JavaScript style设置失效问题求助

核心问题出在你使用的同步XMLHttpRequest请求上：

在startScan()函数中，xhr.open('POST', '/service/servlet/startScan.do', false)的第三个参数设为false，这意味着这是一个同步请求。同步请求会完全阻塞浏览器的主线程，包括UI渲染线程，具体流程如下：

• 执行openScanning()时，先设置divModalScanning的display为block，此时浏览器只是标记了UI需要更新，但还没来得及执行渲染
• 紧接着调用startScan()发起同步AJAX，浏览器主线程被请求阻塞，无法处理UI渲染任务
• 等同步请求完成后，onreadystatechange回调触发，立刻将divModalScanning的display设为none
• 当阻塞解除，浏览器终于可以渲染UI时，模态框已经被隐藏了，所以你看不到它

改用style.visibility = 'visible'无效也是同样的逻辑——同步请求阻塞了渲染，模态框还没来得及显示就被后续代码隐藏。

解决方案 #

把同步请求改成异步请求（这也是现代浏览器推荐的做法），只需要将xhr.open的第三个参数改为true：

function startScan() {  
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/service/servlet/startScan.do', true); // 改为异步
    // 其余代码保持不变...
}

异步请求不会阻塞主线程，浏览器可以在请求发起后立即渲染模态框，直到请求完成后再执行隐藏操作。

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