Olá, eu tenho o seguinte problema: Eu carrego minha página inicial, e nessa página é trazido um select no bd muito pesado, por isso eu fiz com que a página carregasse, e em seguida, fizesse uma requisição AJAX para trazer e exibir essa tabela posteriormente, para que o usuário não precise ficar esperando esse select pesado ser realizado para acessar a página inicial.
Porém, como a requisição AJAX fica em andamento, eu não consigo acessar o menu e redirecionar para outra página enquanto o AJAX não termina, ou seja, eu clico em um link para mudar de página e o redirect só é feito depois que o AJAX retorna erro ou sucesso.
Eu preciso de uma maneira para abortar o AJAX e redirecionar para outra página instantaneamente, eu tentei utilizar a função .abort() e essa função aborta o carregamento da tabela na tela mas ela aguarda a requisição terminar. Eu preciso matar essa requisição para acessar os itens do menu rapidamente, podem me ajudar? Segue abaixo o código realizado.
<script>
var progress;
carregaEstatisticas();
function carregaEstatisticas() {
$('#divEstatisticas').html('<table class="col-lg-12 col-md-12 col-sm-12"><tr><td align="center"><img class="img-responsive" src="/Content/img/loading_laranja.gif" style="width: 20px; height: 20px;"></td></tr></table>');
getEstatisticas();
}
function getEstatisticas() {
progress = $.ajax({
url: '/Home/Estatisticas',
type: "POST",
data: {
dataConsulta: $('#dataConsulta').val(),
empresa: $('#empresa').val()
},
success: function (data) {
$("#divEstatisticas").html(data);
}
});
}
$('a').on("click", function () {
progress.onreadystatechange = null;
progress.abort();
progress = false;
});
</script>