在用户离开页面后运行去抖动的 function

Question

我有一个 3 秒的去抖动 function 发送到 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检查计时器，如果存在 - 执行所需的逻辑。

或者您可以尝试在 debouncing 中使用指示debouncing的标志。 喜欢：

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