Trying to handle unload event

Question

I'm trying to make some actions when I close the browser or I go to some other page but nothing its done this is the script at the bottom there are the rwho ways I tried. I tried using jquery what I realize that unload function is deprecated

if(game_id){
    get_players();
    get_users();
}

function get_players(){
    socket.emit('on_lobby', {
        game_id:game_id,
    });
    socket.on('lobby_connected',function(){
        $.ajax({
            url:'/getPlayers',
            method:'GET',
            data:{
                game_id: game_id
            }
        }).done(function(response){
            if(response.status === 'ok'){
                $('#connected_players').empty();
                $('#connected_players').append(response.html);
                
            }else{
                Swal.fire({
                    icon: 'error',
                    text: response.message,
                })
            }
        });
    });
}

function get_users(searched){
    $.ajax({
        url:'/getConnectedUsers',
        method:'GET',
        data:{
            searched:searched
        }
    }).done(function(response){
        if(response.status === 'ok'){
            $('#connected_users').empty();
            $('#connected_users').append(response.html);
            
        }else{
            Swal.fire({
                icon: 'error',
                text: response.message,
            })
        }
    });
}

function search_users(){
    var searched = $('#search-user-input').val();
    get_users(searched);
}

function send_invitation(receiver){
    socket.emit('private',{
        type:'invitation',
        receiver: receiver,
        sender: username,
        text:'/game/' + game_id
    });
}
socket.on('user_loged', function(){
    get_users();
})
socket.on('user_loged_out', function(msg){
    if($('#player-item-'+ msg.username ) !== undefined){
        $('#player-item-'+ msg.username).remove();
    }
    get_users();
})

//not work
window.onunload = unloadPage;

function unloadPage()
{
 alert("unload event detected!");
}
//doesn't works too
window.addEventListener('unload', function(event) {
    alert('I am the 3rd one.');
});

Answer 1

Use the beforeunload event handler. To cite MDN Web Docs...

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

You are right, unload() in jQuery is deprecated! They don't quite say it, but they do list beforeunload as a possible alternative on the unload() docs page...

In practical usage, [unload()] behavior should be tested on all supported browsers and contrasted with the similar beforeunload event.

In a simple example below, a handler checks if the user is okay with redirecting or refreshing, and if so, allows the event to handle normally (close the window), otherwise, we cancel the event (either returning false or cancelling default should be sufficient, but I like doing both).

In pure JavaScript...

window.onbeforeunload = function (e) {
    if(confirm()) {
        return true;
    }
    e.preventDefault();
    return false;
};