How to call a function during window.onbeforeunload

Question

I've read many examples here on how to intercept the window closing and popping up a dialog. I need something different. Before my page is closed or changed I need a function to be called and completed.

I've updated my code below to help better explain my question.

window.addEventListener("beforeunload", function(event) {
  //I need the done callback function to fire before the page is changed
  //I've placed return null in that call because I think I need to pass something back?
  visualize({
    auth: {
      name: "piper",
      password: "password",
    }
  }, function(v) {
    //destroy session
    v.logout().done(function() {
      console.log("JRS Logout");
      return null;
    });
  });
});

Show us where you tried to call it in an onbeforeunload event and describe exactly what happened that you don't understand. — takendarkk, Feb 16 '18 at 20:29
is there a reason that "window.onbeforeunload = jrsLogout;" would not work? — willman, Feb 16 '18 at 20:30
If `v.logout()` synchronously kicks off a request to log out, you won't be able to do anything when it completes since the page will have already unloaded, but any XHR request sent synchronously should still go through and be received by the server. So what you need to do is `visualize(..., function (v) { ... })` and _inside_ the callback, register the `beforeunload` handler that calls `v.logout()`. — Patrick Roberts, Feb 16 '18 at 21:00

Patrick Roberts · Answer 1 · 2018-02-16T21:29:16.417

To follow up on my comment, this is what I'm suggesting:

visualize({
  auth: {
    name: "piper",
    password: "password",
  }
}, function(v) {
  //I need the done callback function to fire before the page is changed
  //I've placed return null in that call because I think I need to pass something back?
  window.addEventListener("beforeunload", function(event) {
    // make sure that this is reached
    console.log('JRS Logging Out');
    //destroy session
    v.logout().done(function() {
      // THIS WILL NEVER BE REACHED, but it should still work
      console.log("JRS Logout");
      return null;
    });
  });
});

I haven't tested this myself, so you shouldn't just take my word that it works. Make sure you test it on as many browsers as you can, because it's possible that each browser may buffer the XHR request and preemptively cancel it rather than sending the request before the page unloads.

I think as you mentioned before, since my logout function is async it is not allowing this process to work. I've tried your code but the console.log line is never getting called. — user179981, Feb 16 '18 at 21:23
@user179981 it's not _supposed_ to be called. I'm asking you to check if the server received the request, I'm saying the `console.log()` there will _never_ be called, but that (possibly depending on the browser) it should still log out successfully. — Patrick Roberts, Feb 16 '18 at 21:28

How to call a function during window.onbeforeunload

1 Answers1