Ajax requests do not stop loading

Question

I have been with this problem for many days now, I have a page where externally loads the link from a security camera to display the image on the main page, so far so good, the image shows normally on my page, however, all XHR requests do not work, they stay in "pending" status all the time, probably because the camera link never finishes uploading and then the requests wait for it to finish? , how can I get around the problem? , here’s how I’m calling the video, which even runs on the page normally:

<div id="player">
   <img src="/link-da-camera-aqui" height="420" />
</div>';

Then I try to make the requests to check if there is any new message on the page, it is this request that never finishes loading:

    setInterval(function() {
        jQuery.ajax({
        url: "/verifica-novas-mensagens", success: function(resultado){
        if(resultado === '0'){
        alert('Erro na transmissão do vídeo');
        location.href="/home";
        }
        document.getElementById("novas-mensagens").innerHTML = resultado + "<br>";
        }});
    }, 8000);

The camera image works normally without crashing, but the link from it never finishes charging and unfortunately none XHR works, thanks in advance!

Answer 1

Try to make the request in the background to not stop the other processes by putting async : true, I do not know why you are using setInterval, if it is possible to remove it:

jQuery.ajax({
    async : true,
    url: "/verifica-novas-mensagens", success: function(resultado){
    if(resultado === '0'){
    alert('Erro na transmissão do vídeo');
    location.href="/home";
    }
    document.getElementById("novas-mensagens").innerHTML = resultado + "<br>";
}});