如何检测用户已取消页面加载答案

【问题标题】：How to detect a user has cancelled a page load如何检测用户已取消页面加载
【发布时间】：2019-07-09 15:56:31
【问题描述】：

我有一个带有基本表单的网页。在点击“提交”和页面重新加载结果之间有一个不可忽略的等待时间，所以我在用户等待时添加了一个小微调器。

这很简单，这是 HTML：

<div id="loadingBox" style="display:none;">
    <!---put the actual loader here--->
</div>

这是在用户单击提交后使微调器可见的基本事件处理程序：

$("#submitButton").submit(function(e)
{
    $("#loadingBox").css('display', 'block');
});

问题是用户可以点击提交，使框出现，然后点击escape或点击浏览器按钮取消页面加载，并且spinner一直在旋转。

我添加了这个以使微调器在他们命中逃生时消失：

$(document).keydown(function (e)
{
    if(e.keyCode == 27)
    {
        $("#loadingBox").css('display', 'none');
    }
})

如何检测用户点击了取消页面加载按钮？我找不到在单击该按钮时触发的事件，也找不到反映它的就绪状态或其他属性。我担心的是用户单击取消加载按钮，然后微调器没有消失，用户盯着微调器认为页面仍在做某事，但它什么也没做。

【问题讨论】：

用ajax提交怎么样。这样您就可以提供一个取消按钮（不知道为什么要这样做，但是这样您可以向服务器发送响应（再次 ajax）以删除刚刚保存的数据，以防止出现不足），您甚至可以现在使用 ajax 进行重定向。
是的，我正在为此目的转换为 AJAX。谢谢！
你还需要 ajax 的答案吗？
谢谢@HimanshuPant 但我现在明白了，在下面提交了答案

标签： javascript jquery dom

【解决方案1】：

收听onbeforeunload 事件。

window.addEventListener("beforeunload", function(event) {
  alert("How dare you leave this page?!");
});

【讨论】：

我在我的代码中添加了一个像上面这样的 sn-p 并告诉它将“测试”记录到控制台。不幸的是，我只在单击提交按钮时才看到此日志，而不是在单击取消加载浏览器按钮时。因此，它会立即将 loader display 设置为 none，而不是在将其设置为 none 之前等待加载取消。

【解决方案2】：

这就是我解决问题的方法。

首先，我将页面转换为使用 AJAX。我正在使用 Flask，所以这个网页非常有帮助： https://medium.com/@doobeh/posting-a-wtform-via-ajax-with-flask-b977782edeee

但是我需要使用从 AJAX 收到的数据更新现有的 Jinja2 模板。我最终通过在 render_template 函数上调用 jsonify 来做到这一点，如下所述： Render Jinja after jQuery AJAX request to Flask

但是我用于折叠/展开模板表格部分的按钮不起作用，因为事实证明事件仅适用于页面加载时出现的内容。因此，我不得不委托事件以允许事后添加的项目触发我的 jquery 正在侦听的事件，如此处所述： https://aiocollective.com/blog/click-doesn-t-work-after-ajax-load-jquery/

我希望这些链接对其他人有帮助！

【讨论】：