Stop Jquery request by refreshing the page or clicking on a link

Question

I am using long Polling with PHP + Jquery, when the user enters the site a background connection to the server is opened through Jquery this way:

var req  = $.post //(resto do codigo aqui).

This connection is open for 20 seconds and then closes automatically.

Good as you can notice I record in a variable to be able to abort the request with the req.abort();

But I wanted to abort it only when the user updated the page or clicked on some link on the page, because when he does so the site only "responds" after the request is completed, this way the user would have to wait 20 seconds + the time that the site could take to for example upload an image after the end of the request, so I would like to know if there is a way not to make a new request when he gives an update on it?

Ps: I used as a test setTimeout putting him to give a req.abort(); after x seconds, and the request was canceled normally, so as there was no new connection opened with the server waiting for reply, when the page was updated it did not take 20 seconds to give origin, but this is not feasible, whereas I am doing real-time rsrs checks

Current js file code below:

$(function(){
pegaNotificacoes();
});

var totalnot = 0;
var totalparc = 0;

function limpatotal()
{
totalparc = 0;
$('#notifinum').html("");
}

function pegaNotificacoes(timestamp)
{

var data = {};

if (typeof timestamp != 'undefined')
	data.timestamp = timestamp;

var req  = $.post('controllers/longpolling.php', data, function(res){
	
	for(i in res.notificacoes)
	{
		
		if (totalnot == 0)
		{
			$('#notificacao').html("");
			$('#notificacao').prepend("<div style='height: 60px;' class='notificacao'><a href='"+res.notificacoes[i].not_link+"&notid="+res.notificacoes[i].not_codigo+"'>"+res.notificacoes[i].not_assunto+"</a></div>");
		}
		else
		{
			$('#notificacao').prepend("<div style='height: 60px;' class='notificacao'><a href='"+res.notificacoes[i].not_link+"&notid="+res.notificacoes[i].not_codigo+"'>"+res.notificacoes[i].not_assunto+"</a></div>");
		}
		
		totalnot = totalnot + 1; 
		totalparc = totalparc + 1; 
		$('#notifinum').html("").fadeOut('slow', 'linear');
		$('#notifinum').html(totalparc).fadeIn('fast', 'linear');
		
		if (totalnot > 1)
		{
			if ($("#notificacao").height() < 350)
			{
				var altura = ($("#notificacao").height()) + 55;
				$("#notificacao").height(altura);
			}
		}
	}
	
	pegaNotificacoes(res.timestamp);
	
}, 'json');

}

Answer 1

Dude from what I understand you can check if the event occurred Reload, as an example:

if(location.reload)
{
    req.abort();
}

So if it occurs you call your function aborting the request.

In the case of clicking on a link, you can add on the tag <a> in html a class, for example:

<a class='abortar'> Aborte a requisição </a>

And using jquery you can click this tag with the example:

$('a').on('click','.abortar',function()
{
   req.abort();
});