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

Javascript - updating textarea freezes browser tab

本文关键字：浏览器 选项 冻结 textarea 更新 Javascript      更新时间：2023-09-26

我正在用javascript每2秒更新文本区域中的文本，但有时会发生整个页面冻结，您必须关闭选项卡(浏览器中的其他选项卡正常工作，这发生在所有访问该页面的人)。

我的代码是这样的:

                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的文本。有时它工作了几个小时，然后卡住了，浏览器说"页面没有重新响应…"或有时它只工作了几分钟，然后卡住了…

有谁能帮忙吗?

(假设我们修复了代码中的基本语法错误。)您可以愉快地启动后续请求，而不必等待先前的请求完成。如果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)，而不是传递一个字符串给它，只是传递一个函数引用。

相关文章：