如何在 ajax 调用完成之前阻止页面导航

Question

所以我有一个 ajax 调用来减少几十个大小都为几兆字节的数据块，然后通过 html5 文件系统 api 将数据存储在本地。

我想阻止用户在 ajax 调用完成之前离开页面。我决定探索onbeforeunload 事件，让它通知用户应该留在页面上，直到ajax 调用完成。我在 AJAX 调用之前设置了以下内容，在 AJAX 调用结束/成功时我重置了window.onbeforeunload。

window.onbeforeunload = function(){
    return "Information is still downloading, navigating away from or closing "+ 
        "this page will stop the download of data";
}

当我试图关闭页面或离开页面时，弹出消息会按预期出现，通知用户留下。但是，一旦我确认我想留在页面上，ajax 调用就不会从中断的地方继续。有没有办法防止 ajax 调用暂停/停止或继续/重新开始执行？

我愿意接受任何想法来实现本文标题中描述的所需功能。

Answer 1

很确定您可以在 .js 文件中创建一个全局文件，例如...

var request;

然后将您的 ajax 调用分配给该变量。

request = $.ajax{
 //Ajax
 //Stuff
 //Goes
 //Here
}

现在在你的 window.unbeforeunload 函数中，添加这个条件语句。

window.onbeforeunload = function(){
  if(!request){
    return "Request not initiated";
  }else{
    //Request is in progress...
    //You can use request.abort() if you need
  }
}

编辑：详细说明您可以在request 对象check out this page 上使用的一些方法。 （例如，.done 或 .always 可能适合您的情况）