Question

场景：我正在创建一个事件注册模块，用户可以从日历中选择日期进行预订，填写一些输入字段并付费预订日期。其中一个要求是每个日期只能预订一次。这出现了两个人想要在同一时间预订相同日期的情况。因此，我们需要向稍后来的用户显示该日期的消息，该消息预订已在该特定日期进行。请稍后再回来查看。

为此，我会在用户选择日期时在我的数据库中创建一个临时条目。针对该条目，我可以向稍后访问的其他用户显示该消息。

逻辑上，如果是第一个用户，则必须删除该条目：

选择其他日期。
关闭浏览器或离开页面

这样，第二个想要预订同一日期的用户就可以使用它。

问题：我可以在用户更改其所选日期后删除该条目。我无法实现第二个。我写了一个函数，它将删除行并调用该函数onbeforeunload jQuery事件。显然，该函数不适用于jQuery。

window.onbeforeunload = function(){
  deleteTempEntry(); //This sends an ajax call to delete the entry. Not working.

  alert("The second alert"); // even this alert doesn't work.

  // I actually intend to use confirm box to make sure to not to delete the entry if the user does not leave the page.
  confirm("Your current progress will be removed. Are you sure?"); 

  //Calling this return function shows the warning message but none of the other code works.
  //return 'Are you sure you want to leave?';
};

我试过，绑定/打开/纯JS，但这些似乎都没有。

正如here所解释的那样，由于安全原因，我无法对onbeforeunload / unload事件做多少事情。对此有何解决方法？

感谢。

Answer 1

我需要类似的东西。但是不幸的是，在onBeforenUnload中调用后端并不可靠。大多数AJAX调用将无法到达后端（有些可能）；唯一可以保证的呼叫是使用 navigator.sendBeacon（URL，data）。即使浏览器已关闭，它也会发送POST请求。

Answer 2

您可以使用 async：false 发布数据，如下所示：

$(window).unload(function () {
            $.ajax({
                type: 'POST',
                async: false,
                url: 'your url',
                data: {  }
            });
        });

Answer 3

尝试console.log并返回onbeforeunload方法。也许用户在您的ajax通过之前离开页面。

请参阅： https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

自2011年5月25日起，HTML5规范声明了对

的调用

window.alert（）
window.confirm（）
window.prompt（）

在此事件期间，

命令可能会被忽略。

Answer 4

您可以让客户发出心跳＆＃34;心跳＆＃34;每隔30秒左右到服务器，并使用最后发送的心跳的时间戳以及对预订日期的引用来更新数据库中的记录。然后运行一个每分钟左右运行一次的cronjob，它检查所有这些记录，如果其中一个记录超过120秒，则删除记录。

在卸载/卸载之前发送Ajax调用

4 个答案: