javascript - 用户离开页面后运行去抖函数

Question

我有一个 3 秒的去抖函数，我将其发送到 API 服务以跟踪事件。

// api.js
import { debounce } from 'lodash'

const submitRecords = debounce(async () => {
  await API.submit({ ...data })

  // do other stuff here
}, 3000)

每次有用户交互时，我的应用程序都会调用 submitRecords，等待 3 秒，然后向 API 服务发出请求。这里的问题是，如果用户在 3 秒之前离开，则永远不会调用电话。

即使用户已经离开当前 URL，是否有办法仍然发送去抖请求？我阅读了 window.onbeforeunload 但我不确定它是否适合我的用例。

Answer 1

是的，您可以使用window.onbeforeunload。但您可能需要另一个 debounce 实现，或者自己完成，而不是 async/await 。可以通过使用 setTimeout 实现的 debounce 并将计时器存储在全局某个位置来完成。在 window.onbeforeunload 中检查计时器，如果存在 - 执行所需的逻辑。

或者您可以尝试使用标志来指示去抖动中的功能。喜欢:

const isDebouncing = false;
const submitRecords = () => {
  isDebouncing = true;
  debounce(async () => {
    isDebouncing = false;
    await API.submit({ ...data })

    // do other stuff here
  }, 3000)();
}

window.onbeforeunload = () => {
  if (isDebouncing) {
    // do request
  }
}

注意:除了一个标志之外，您还可以存储与 await API.submit({ ...data }) 相关的其他数据。

注意:在某些情况下 window.onbeforeunload 需要阻止事件和返回值，例如:

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';
});

描述她:https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload