Delay Return to Wait for Asynchronous Functions (событие beforeunload)

Question

В этом примере кодирования функция logout() не будет выполнять все ее асинхронные вызовы и не будет ждать, пока они не будут завершены, - вместо этого страница выгружается раньше, потому что возврат beforeunload Событие вызывает разгрузку страницы.

$(window).on('beforeunload', function(event) { 
    event.preventDefault(); 
    logout(); 
    return; 
}); 

То, что я хочу попробовать, что функция возвращает событие после нескольких асинхронных вызовов в logout() закончены.

EDIT: Моя цель NOT чтобы показать предупреждение! Я хочу только выполнить код до того, как страница будет выгружена. Функция выхода может содержать ajax-запросы и анимации jQuery с некоторой продолжительностью, которая должна быть завершена.

Я пробовал с обратными вызовами, но в конечном итоге, это не желаемый результат, поскольку он возвращается к обратному вызову, а не к функции события.

$(window).on('beforeunload', function(event) { 
    event.preventDefault(); 
    logout(function(x) { return; }); 
}); 

Answer 1

Не совсем чистое решение, но вы можете попробовать setTimeout, чтобы заставить код ждать во время выхода из системы.

var timeToLogoutInMs = 500; 
setTimeout(function() { 
    // Nothing 
}, timeToLogoutInMs); 

EDIT: Зачем вам нужно делать это на крюке beforeunload? Почему бы не отключить пользователя вручную?

Answer 2

Поскольку все выполненные на странице страницы становятся недействительными, когда страница выгружается, вы не можете зависеть от самой страницы, чтобы завершить асинхронный вызов.

Одно слово для chrome extension будет использовать справочную страницу. Вы можете просто отправить сообщение на фоновый рисунок внутри обработчика beforeunload, поймать всю информацию, с которой вам нужно иметь дело, и выполнить асинхронный вызов на фоновом изображении. Пример кода будет:

content.js

window.addEventListener('beforeunload', function() { 
    chrome.runtime.sendMessage({ info: "Here is the info you would like to pass to background page"}); 
}); 

background.js

chrome.runtime.onMessage.addListener(function(request) { 
    // The following is your async call 
    logout(); 
    // Don't forget the following code 
    return true; 
}); 

Не забудьте вернуть истинное от слушателя событий в фоновом режиме страницы, так как chrome.runtime.onMessage.addListener станет недействительным, когда прослушиватель событий возвращается, см. this answer для получения более подробной информации.