运行仅在 tab/window 实际关闭时起作用

Question

我正在尝试在用户关闭选项卡时从 React 客户端发送一个 get 请求以表达。

我实际上用这个做到了，但没有确认：

window.addEventListener('beforeunload', async () => await axios('/delete');

如果我尝试使用正确的确认消息：

window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = '';
  return true;
})

我确实收到了确认消息，但我无法捕获对运行功能的响应，只有当 leave 被点击时。

我看到了很多关于这个的回复，但它们都太老了，似乎不能在最新的浏览器上工作。

Answer 1

使用 useEffect在组件卸载时调用的回调，因此在您的路由组件中使用它。

useEffect (()=>{
  
  return ()=>{
  //your code here , make sure its not updating any state variable    
  }
}
,[])

Answer 2

最后我做了一件非常令人费解的事情。但对我有用。

在 React 前端，我会在事件触发后立即调用 delete。由于我无法检测用户是否点击停留，所以我设置了setTimeout并在前端给它1s。

useEffect(() => window.addEventListener('beforeunload', async (e) => {
  e.preventDefault()
  e.returnValue = ''
  await axios.post('/api/delete', { stay: false })
  setTimeout(async () => {
   await axios.post('/api/delete', { stay: true })
  }, 1000)
 }), [])

并且在 Express 后端，我等待 2 秒以等待取消发生，如果没有发生则继续删除。

let timer

app.post('/api/delete', (req, res) => {
  if (req.body.stay) {
    clearTimeout(timer)
  } else {
    clearTimeout(timer)
    timer = setTimeout(() => console.log('delete a file here'), 2000)
  }
  res.end()
})

如果有人能想出更好的答案，我会接受这个答案。

运行仅在 tab/window 实际关闭时起作用

Run function only when tab/window is actually closed

javascript

dom-events

reactjs

运行 仅在 tab/window 实际关闭时起作用

Run function only when tab/window is actually closed

javascript

dom-events

reactjs

运行仅在 tab/window 实际关闭时起作用