javascript - 卸载事件之前使用的限制是什么？

Question

在 beforeunload 回调中可以做什么，不能做什么？

是否可以打开 XHR/fetch 并将数据发送到服务器？ 如果不是，是否可以只发送数据，而没有任何成功回调阻塞？

是否可以使用 window.location 更改页面的位置？函数继续执行多长时间？

window.addEventListener("beforeunload", function (event) {
    // code
});

Answer 1

您可以将任何您想要的内容放入“beforeunload”回调中，只是不能保证它会执行，除非您使用同步/阻塞代码。

这是我将用于演示目的的阻塞 sleep 函数:

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() < start + delay);
}

任何同步的、阻塞的代码都保证执行完成:

window.addEventListener("beforeunload", function (event) {
  console.log("Blocking for 1 second...");
  sleep(1000);
  console.log("Done!!");
});

像下面的代码这样的任何异步代码(即带有回调的代码)都将在事件循环中排队，但它可能会或可能不会完成执行，具体取决于浏览器何时完成“卸载”操作(例如关闭窗口、刷新页面) .) 这里的时间实际上取决于您计算机的性能。例如，在我的计算机上，由于我的浏览器没有时间刷新/关闭页面，日志语句仍然执行 10 毫秒的超时。

window.addEventListener("beforeunload", function (event) {
  setTimeout(() => {
    console.log("Timeout finished!"); // Odds are this will finish
  }, 10);
  console.log("Done!!");
});

但是，永远不会执行 100 毫秒的超时:

window.addEventListener("beforeunload", function (event) {
  setTimeout(() => {
    console.log("Timeout finished!");
  }, 100);
  console.log("Done!!");
});

保证您的函数运行完成的唯一方法是确保您编写的同步代码会像第一个示例中那样阻止事件循环。