javascript - Delay Return to Wait for Asynchronous Functions (beforeunload event) - Stack Overflow

admin管理员组

文章数量:1388161

In this coding example the function logout() won't execute all it's async calls and won't wait till they are finished – instead page is unloading before, because the return of the beforeunload event triggers unloading the page.

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout();
    return;
});

What I want to try is that the event function returns AFTER several asynchronous calls in logout() are finished.

EDIT: My goal is NOT to show an alert with this! I only want to execute some code before the page is unloaded. The logout function could contain ajax requests and jQuery animations with some duration that needs to be finished.

I tried with callbacks, but end up with this, what isn't the desired result since it's returning to the callback, not to the event function.

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout(function(x) { return; });
});

In this coding example the function logout() won't execute all it's async calls and won't wait till they are finished – instead page is unloading before, because the return of the beforeunload event triggers unloading the page.

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout();
    return;
});

What I want to try is that the event function returns AFTER several asynchronous calls in logout() are finished.

EDIT: My goal is NOT to show an alert with this! I only want to execute some code before the page is unloaded. The logout function could contain ajax requests and jQuery animations with some duration that needs to be finished.

I tried with callbacks, but end up with this, what isn't the desired result since it's returning to the callback, not to the event function.

$(window).on('beforeunload', function(event) {
    event.preventDefault();
    logout(function(x) { return; });
});

• javascript
• jquery
• asynchronous
• google-chrome-extension
• jquery-events

Share Improve this question Follow edited Aug 17, 2020 at 19:27 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 27, 2016 at 15:08 ScientiaEtVeritasScientiaEtVeritas 5,28844 gold badges4545 silver badges6363 bronze badges 13

• Possible duplicate of jquery beforeunload when closing (not leaving) the page? – E. Mourits Commented Jun 27, 2016 at 21:07
• 1 @E.Mourits No, have you read my question? It has nothing to do with the distinction between leaving and navigating, but to execute code before the page is unloaded / the new page is loaded. – ScientiaEtVeritas Commented Jun 27, 2016 at 21:15
• As far as I know you cannot stop a user from leaving your page. The possible duplicate is an answer I thought is closest to what your want. – E. Mourits Commented Jun 27, 2016 at 21:19
• 1 @E.Mourits: I can. The beforeunload function is executed before. If there is a while(true) in it, the user can't leave. I don't see that your reference has something to do with my question. – ScientiaEtVeritas Commented Jun 27, 2016 at 21:24
• Ok..you can, but you really shouldn't. Why do you want to the user out when he/she tries to leave? Adding a logout button to your page works just as well. – E. Mourits Commented Jun 27, 2016 at 21:31

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 4

Since everything executed on the page would bee invalid when the page is unloaded, you can't depend on the page itself to plete the async call.

One wordaround for chrome extension would be making use of background page. You could simply send message to background page inside beforeunload handler, catching all info you need to deal with, and execute the async call in background page. Sample code would be:

content.js

window.addEventListener('beforeunload', function() {
    chrome.runtime.sendMessage({ info: "Here is the info you would like to pass to background page"});
});

background.js

chrome.runtime.onMessage.addListener(function(request) {
    // The following is your async call
    logout();
    // Don't forget the following code
    return true;
});

Don't forget to return true from the event listener in background page, since chrome.runtime.onMessage.addListener would bee invalid when the event listener returns, see this answer for more details.

Try using async/await for your handler, that is:

$(window).on('beforeunload', async function(event) {
    await logout();
    event.preventDefault();
    event.returnValue = false; // Seems require this for Chrome
});

Of course, you should have Promise returned from logout();

But I'm not sure if this is reliable.

Not really a clean solution but you can try setTimeout to force the code to wait while the logout is in progress.

var timeToLogoutInMs = 500;
setTimeout(function() {
    // Nothing
}, timeToLogoutInMs);

EDIT: Why do you need to do this on the beforeunload hook? Why not set a manual option user to log out?

本文标签： javascriptDelay Return to Wait for Asynchronous Functions (beforeunload event)Stack Overflow