JavaScript页面离开时调用finishTheTest()：按需触发或无提示方案

开发者阿泽

2026-8-2

页面离开时触发测试保存的两种实现方案

方案1：用户确认离开后执行保存

浏览器的beforeunload事件无法直接捕获用户的选择结果，但可以借助用户确认离开后触发的unload/pagehide事件实现需求：

在beforeunload中仅返回提示文本触发确认弹窗，不执行保存操作
用户确认离开后，通过unload或pagehide事件调用finishTheTest()

注意：页面卸载时普通异步请求可能被浏览器中断，finishTheTest中的保存逻辑必须使用navigator.sendBeacon()或带keepalive: true的fetch，确保请求能完成。

代码示例：

// 触发离开确认提示
window.addEventListener('beforeunload', (e) => {
  const promptMsg = 'Your data will be lost if you leave now. Are you sure?';
  e.returnValue = promptMsg;
  return promptMsg;
});

// 用户确认离开后执行保存
window.addEventListener('unload', () => {
  finishTheTest();
});

// 兼容移动端和更多场景的pagehide事件
window.addEventListener('pagehide', () => {
  finishTheTest();
});

方案2：静默保存无提示弹窗

如果不需要用户确认，直接在页面离开时静默保存，只需移除beforeunload的返回值，同时保证保存请求的可靠性：

代码示例：

// 移除提示框，执行静默保存
window.addEventListener('beforeunload', (e) => {
  delete e.returnValue; // 阻止提示弹窗
  finishTheTest();
});

// 双重保障：搭配unload/pagehide事件
window.addEventListener('unload', () => {
  finishTheTest();
});

window.addEventListener('pagehide', () => {
  finishTheTest();
});

核心优化点

避免重复执行：添加标记变量确保finishTheTest只运行一次，防止多事件触发重复保存：

let testSaved = false;
function finishTheTest() {
  if (testSaved) return;
  testSaved = true;
  // 使用sendBeacon发送保存请求
  navigator.sendBeacon('/api/save-test-progress', JSON.stringify(testProgress));
}