javascript - Chrome 不会在需要时重绘页面

Question

我已经搜索了类似的问题(例如 Chrome does not redraw <div> after it is hidden 和 Force DOM redraw/refresh on Chrome/Mac )，但没有一个问题给了我解决问题的方法。我正在编写调制解调器配置面板，带有“,,tabs”的网页。每个选项卡上都有一些设置 - 就像任何路由器的配置面板一样。

保存配置(当用户单击“保存”按钮时完成)需要几秒钟(我的嵌入式平台不是速度之王)，因此我决定放置特殊的“请等待”窗口(准确地说是div)，该窗口通常是隐藏的，但当需要让用户平静下来时显示:-)。

在 Firefox 上一切正常:单击“保存”后，将显示“请稍候”div，然后使用 POST 方法保存配置。 但是，在 Chrome 26 和 Chromium 25 上，只有保存配置后，div 才会显示。正如您在执行保存配置的 PHP 脚本后在 SaveConfiguration 函数中看到的那样，会显示警报 - 这是 PLEASE WAIT div 在 Chrome 上显示的位置。 Chrome 似乎没有重绘页面，而是立即开始启动 POST 脚本。有没有人遇到过类似的问题，现在如何解决这个问题？

下面是我的代码片段，我只提供了可能提供我在做什么的线索的函数。如果有帮助的话，我可以发布更多代码。

function showLoadingScreen(yes)
{
    if(yes)
    {
        document.getElementById("loadingtext").innerHTML="Please wait...";
        document.getElementById("loading_overlay").style.display="block";
        document.getElementById("loading_window").style.display="block";
    }
    else
    {
        document.getElementById("loading_overlay").style.display="none";
        document.getElementById("loading_window").style.display="none";
    }
}

function postDataSync(url, params)
{
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) 
    {
        XMLHttpRequestObject = new XMLHttpRequest();
    } else 
        if (window.ActiveXObject) 
        {
            XMLHttpRequestObject = new
            ActiveXObject("Microsoft.XMLHttp");
        }
    if(XMLHttpRequestObject) 
    {
        XMLHttpRequestObject.open("POST", url, false);
        XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        XMLHttpRequestObject.send(params);
        {
            if (XMLHttpRequestObject.readyState == 4 &&
            XMLHttpRequestObject.status == 200) 
            {
                var result = XMLHttpRequestObject.responseText;
                delete XMLHttpRequestObject;
                XMLHttpRequestObject = null;
                return result;
            }
        }
    }
    return '';  
}

function SaveConfiguration()
{
    var errors=checkForm();
    if(errors!="")
    {
        printError("Can't save configuration because there are errors in current tab:<br><br>"+errors);
        return;
    }
    showLoadingScreen(true);
    saveTab();
    var retval=postDataSync('actions/saveconf3.php','');
    alert("Settings saved. The modem is now being reconfigured.");
    document.location = "http://" + retval;
}

Answer 1

您正在同步使用 ajax，而不是异步，这意味着 javascript 执行会在请求期间停止。要修复此问题，请进行以下更改:

XMLHttpRequestObject.open("POST", url, true);

请求完成后，您需要对行为使用回调。像这样的事情:

    function postDataSync(url, params, success)
    {
        var XMLHttpRequestObject = false;
        if (window.XMLHttpRequest) 
        {
            XMLHttpRequestObject = new XMLHttpRequest();
        } else 
            if (window.ActiveXObject) 
            {
                XMLHttpRequestObject = new
                ActiveXObject("Microsoft.XMLHttp");
            }
        if(XMLHttpRequestObject) 
        {
            XMLHttpRequestObject.open("POST", url, true);
            XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            XMLHttpRequestObject.send(params);
            XMLHttpRequestObject.onreadystatechange = function() {
                if (XMLHttpRequestObject.readyState == 4 &&
                XMLHttpRequestObject.status == 200) 
                {

    var result = XMLHttpRequestObject.responseText;
                    delete XMLHttpRequestObject;
                    XMLHttpRequestObject = null;
                    if (typeof success === 'function') success(result);
                }
            }
        }
        return '';  
    }

function SaveConfiguration()
{
    var errors=checkForm();
    if(errors!="")
    {
        printError("Can't save configuration because there are errors in current tab:<br><br>"+errors);
        return;
    }
    showLoadingScreen(true);
    saveTab();
    postDataSync('actions/saveconf3.php','', saveComplete);
}

function saveComplete(result) {
  showLoadingScreen(false);
  alert("Settings saved. The modem is now being reconfigured.");
  document.location = "http://" + result;
}