在Chrome中取消了document.location.reload(true)

Question

我有一个函数用于检查结果是否在服务器上。

var d = document;
var dl = d.location;
var w = window;
var wt = w.setTimeout;
var X = XMLHttpRequest;
function _checkreload() {
    var x = new X();
    x.open('GET', '?test=results');
    x.onreadystatechange = function (c) {
        if (x.readyState === 4) {
            if (x.status == 205) {
                dl.reload(true);
            } else {
                wt(_checkreload, 200);
            }
        }
    };
    x.send();
};

_checkreload();

有时候由于未知原因，重新加载会被取消：

问题

如何查找重新加载被取消的原因？

请求的细节

由于请求被取消，详细信息窗格中没有任何信息。即使已向服务器发送了一些字节（甚至从服务器响应回浏览器），Chrome也不会显示它们。

- Grim

---

取消请求的详细信息是什么？ - digital-pollution

你尝试过使用window.location.reload(true)吗？ - kemicofa ghost

@kemicofa window.location.reload(true) 和 dl.reload(true) 是一样的，没有区别。 - Grim

这可能会有所帮助：Chrome开发者工具中资源状态为canceled是什么意思？ - benvc

那么它就无法被复制？ - Grim

Answer 1

尝试在您的 _checkReload 函数内添加一个 try {} catch。这将帮助您了解错误所在，如果是在 JS 方面的话。

var d = document;
var dl = d.location;
var w = window;
var wt = w.setTimeout;
var X = XMLHttpRequest;
function _checkreload() {
    try { // Add a try here...
        var x = new X();
        x.open('GET', '?test=results');
        x.onreadystatechange = function (c) {
            if (x.readyState === 4) {
                if (x.status == 205) {
                    dl.reload(true);
                } else {
                    wt(_checkreload, 200);
                }
            }
        };
        x.send();
    } catch (err) { console.log(err); } // ... and a catch there.
};

_checkreload();

由于您的函数重新加载了HTML页面，我建议您在Chrome开发者工具中启用保留日志功能。这将在调试时非常有帮助。

最后，请注意，如果您从本地主机运行此代码，则可能会遇到CORS错误。

- Frenchcooc

---

reload 没有返回值，所以现在我们有了两种类型的返回。1. 显式 return 和 2. 隐式-return。因此，两者都违反了 only-one-return 代码风格。2. 如果发生错误，它将自动打印到控制台。直接使用控制台需要浏览器支持 console 功能并禁用一些旧版浏览器，这会降低浏览器的兼容性。CORS 在这里不是一个事实，因为它要求请求完成并成功返回 CORS 错误代码，但请求已被取消。（我还有一些点，但这里的评论功能受限） - Grim

编辑过了。return 不在由 @PeterRader 提供的代码中。 - Frenchcooc

Answer 2

就像其他评论中提到的那样，看起来你的代码正在与加载所有页面资源竞争。

为了保护它，你可能需要将你的函数包装在窗口的load事件的事件监听器中。

window.addEventListener('load', function(event){
    var d = document;
    var dl = d.location;
    var w = window;
    var wt = w.setTimeout;
    var X = XMLHttpRequest;
    function _checkreload() {
        var x = new X();
        x.open('GET', '?test=results');
        x.onreadystatechange = function (c) {
            if (x.readyState === 4) {
                if (x.status == 205) {
                    dl.reload(true);
                } else {
                    wt(_checkreload, 200);
                }
            }
        };
        x.send();
    };

    _checkreload();
});

如果每200毫秒的时间对于此操作至关重要，您可以为窗口的loadstart和loadend设置事件监听器，并为每个时间戳。事件之间的差异是您用于初始setTimeout的偏移量。

- GenericUser