Запуск отклоненной функции после того, как пользователь ушел со страницы

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.Но вместо async/await может потребоваться другая реализация debounce или сделать это самостоятельно.Это может быть сделано с помощью debounce, реализованным с использованием setTimeout и хранящим таймер где-то глобально.В window.onbeforeunload проверьте таймер и, если имеется, выполните требуемую логику.

Или вы можете попробовать использовать флаг, который указывает функцию в 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