javascript - 这些事件处理程序中的哪一个应该在窗口关闭时触发自定义函数？

Question

好的，我的数据管道工作正常，如果我将事件处理程序映射到输入点击触发器，它会通过 Jquery/Ajax 将数据发送到 PHP 处理文件，然后将数据写入 SQL 数据库。

但是，我尝试在窗口/页面关闭时触发 Ajax 发送的所有方法似乎都不起作用。我不想返回警告框，但是我在网上找到的所有示例似乎都只演示了使用 onbeforeunload、beforeunload 和 unload 事件来显示警告框。他们还说您可以启动自定义事件，但我还没有找到此类事件的可靠示例。

我做错了什么伙计们？这是代码。除了最新的，我尝试的所有触发器都接近顶部被注释掉了，所以你们可以看到我已经尝试过的东西。

var formData;

$(document).ready(function() {

//$("#driver").click(function() {

//$('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
//$('form').submit(function() { window.onbeforeunload = null; });

//window.onbeforeunload = function() {

//jQuery(window).bind("beforeunload",function() {

//$(window).unload(function() {

$(window).bind("beforeunload", function() {

    var date=new Date();
    var formData = $("#testform :input[id!='card-type'][id!='paymentSelection_0']"+
    "[id!='ccSelectedRadio'][id!='card-number'][id!='card-exp-month'][id!='card-exp-year'][id!='card-cvv'][id!='billing-first-name']"+
    "[id!='billing-last-name'][id!='billing-company'][id!='billing-address1'][id!='billing-address2'][id!='billing-city']"+
    "[id!='billing-state'][id!='billing-zip'][id!='billing-phone'][id!='billing-country'][id!='useShippingRadio'][id!='useBillingRadio']"+
    "[id!='ppSelectedRadio'][name!='miscDS.shopperEmailAddress_ymixval'][name!='miscDS.shopperEmailAddress_ymixlabel']"+
    "[name!='miscDS.shopperEmailAddress_secname'][name!='paymentSelectionDS.paymentSelection_ROW0_paymentPPSelected']").serializeArray();

    $.post("jquery/process.php",
        {
            mydata: formData,
            orderSubTotal: orderSubTotal,
            orderTotal: orderTotal,
            numOfItems: numOfItems,
            items: items,
            ids: ids,
            codes: codes,
            qtys: qtys,
            price: price,
            orderTax: orderTax,
            orderShipping: orderShipping,
            appliedPromoIdList: appliedPromoIdList,
            coupon: coupon,
            storeId: storeId,
            activeShipPromotionCount: activeShipPromotionCount,
            itemImages: itemImages,
            date: date
        }
    );
});
});

Answer 1

就附加事件而言，您在此处显示的任何附加方法都可以。问题不在于您的附件方法本身，而是您的函数执行异步任务需要“太长时间”才能在情况发生变化之前完成。

当页面卸载时，所有挂起的 AJAX 请求都会被取消。因为默认情况下 ajax 请求是异步的，所以在浏览器取消请求之前，您的请求甚至没有机会连接到服务器。

对于此用例，唯一的途径是使用同步请求。不过，这可能会导致不良影响:当您的请求处于待处理状态时，浏览器界面的显示和行为就好像它已“锁定”一样。

这就是警报会起作用的原因，因为它本质上是一种同步的“阻塞”情况。警告框有效地停止了整个浏览器 UI 以等待输入。

另请参阅:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests