Question

我每2秒用javascript更新文本区域中的文本，但有时会发生整个页面冻结而你必须关闭标签（浏览器中的其他标签正常工作，所有访问该页面的人都会遇到这种情况）。 / p>

这就是我的代码的样子：

                function ajaxSyncRequest(reqURL) {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("POST", reqURL, false);
                    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                    xmlhttp.send('server=" + server + "');
                    if (xmlhttp.readyState == 4) {
                        if (xmlhttp.status == 200){
                            document.getElementById(\"1\").innerHTML = xmlhttp.responseText;
                            if (document.getElementById('check').checked) { document.getElementById(\"1\").scrollTop = document.getElementById(\"1\").scrollHeight; }
                        } else {
                            document.getElementById(\"1\").innerHTML = "Could not connect to remote server!";\n
                        }
                    }
                }

这是2秒计时器：

                        function timer() {
                            ajaxSyncRequest("ConsoleGenerator");
                            window.setTimeout("timer()", 2000);
                        }

我正在使用POST方法将文本传递给Java Servlet。它有时会工作几个小时，然后冻结，浏览器会说＆＃34; Page不会重新发布...＆＃34;或者有时它只能工作几分钟，然后冻结......

有人可以帮忙吗？

Answer 1

（假设我们修复了代码中的基本语法错误。）您很乐意在不等待之前的请求完成的情况下触发后续请求。如果ajax调用永远需要超过两秒钟，那么你将有重叠的调用。除非你的后端正在序列化调用或类似的，否则这本身并不是问题，但它确实会造成混乱局面。

您还通过将false指定为POST调用的第三个参数来发出同步请求。没有必要使请求同步，这样做（特别是每两秒？！）确实会锁定浏览器的UI。

我建议在安排下一个请求之前等待上一个请求完成，并使请求异步，这样浏览器UI就不会被锁定：

// Accept callback --------------v
function ajaxSyncRequest(reqURL, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", reqURL, true);
    // async, not sync ----------^
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send('server=" + server + "');
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            document.getElementById("1").innerHTML = xmlhttp.responseText;
            if (document.getElementById('check').checked) {
                document.getElementById("1").scrollTop = document.getElementById("1").scrollHeight;
            }
        } else {
            document.getElementById("1").innerHTML = "Could not connect to remote server!\n";
        }
        callback(); // <== Call it
    }
}

function timer() {
    ajaxSyncRequest("ConsoleGenerator", function() { // Pass in a callback
        setTimeout(timer, 2000);
    });
}

这将等待ajax完成，然后在两秒钟后安排另一次更新。如果你想在两秒内包含ajax调用的时间，我们可以做一些基本的数学运算：

function timer() {
    var started = Date.now();
    ajaxSyncRequest("ConsoleGenerator", function() { // Pass in a callback
        setTimeout(timer, Max.max(0, 2000 - (Date.now() - started));
    });
}

旁注：window.上不需要setTimeout前缀（尽管没有任何东西遮蔽了全局window），而不是将字符串传递给它，只需传递一个功能参考。

Javascript - 更新textarea冻结浏览器选项卡

1 个答案: