如何在window.onbeforeunload期间调用并完成指定函数？

Got it, let's work through this! I get that most examples out there just show how to pop up a confirmation dialog when the user tries to leave the page, but your need to run and fully finish a specific function before unload is a bit different. Here's what you need to know, depending on whether your function is synchronous or asynchronous:

1. For Synchronous Functions #

If your function runs immediately and doesn't rely on async operations (like API calls, timers, etc.), you can hook it directly into the beforeunload event. Just make sure the function is lightweight—browsers might cut off overly long synchronous tasks during unload.

window.addEventListener('beforeunload', (event) => {
  // Call your synchronous function here
  yourRequiredSyncFunction();

  // Note: Some browsers require you to set event.returnValue (even if you don't want a dialog)
  // to ensure your function executes. If you don't need a confirmation popup, you can still set it to an empty string:
  event.returnValue = '';
});

2. For Asynchronous Functions (The Tricky Part) #

If your function involves async work (like sending data to a server), the default beforeunload event won't wait for it to finish—browsers will terminate the page as soon as the event handler finishes running. For these cases, use one of these browser-native solutions designed exactly for this scenario:

Option A: navigator.sendBeacon() #

This is the most reliable method for sending data during unload. The browser guarantees that the beacon request will be sent even after the page is closed.

window.addEventListener('beforeunload', (event) => {
  // First, run any synchronous pre-processing your function needs
  const dataToSend = yourSyncPreprocessing();

  // Use sendBeacon to handle the async part
  navigator.sendBeacon('/your-server-endpoint', JSON.stringify(dataToSend));
});

Option B: fetch with keepalive: true #

If you need more control over the request (like custom headers or HTTP methods), use fetch with the keepalive flag. This works similarly to sendBeacon but gives you more flexibility.

window.addEventListener('beforeunload', (event) => {
  fetch('/your-server-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'your-data' }),
    keepalive: true // Critical: tells the browser to finish the request after unload
  });
});

Important Notes #

• Browser restrictions: Modern browsers limit what you can do in beforeunload to prevent abuse. For example, you can't customize the text of the confirmation dialog anymore, and if the user hasn't interacted with the page (e.g., closes it immediately after opening), your handler might not run at all.
• Don't rely on this for critical data: Use beforeunload as a safety net, but save important data incrementally during user interactions (like form input changes) whenever possible.
• Keep it lean: Even synchronous functions should be as short as possible—browsers will prioritize closing the page over running long tasks.

If you share your updated code snippet, I can help adjust this solution to fit your exact function and any edge cases you're dealing with!

内容的提问来源于stack exchange，提问作者user179981