Connection Timeout after several successful requests jQuery.ajax

Question

I am new to jQuery.ajax, and I don't know what's wrong with my code. As the title states, I'm having problems accessing the site I created after several successful requests. Can't seem to find the the solution here. I hope someone can help me.

Here's my JS Code:

$(document).ready(function(){
async();
fetch();    
});

function fetch(){
setTimeout(function(){
    fetch();
    async();
}, 5000);
}

function async(){   
$.ajax({

    type: 'GET',
    url: 'message.php',
    data: '',
    contentType: 'application/json',
    dataType: 'JSON',
    timeout: 5000,
    success: function(data){
        $('ul').children().remove();
        $.each(data, function(index, item){
            $('#lstip').append('<li>'+item.ip+'</li>');
            $('#lstmsg').append('<li>'+item.message+'</li>');
            $('#lstlike').append('<li><a href="message.php?like='+item.line+'">'+item.like+'</a></li>');
        });

    },
    error: function(xhr, stats, err){
        console.log(stats);
    }

}); 
}

Additional Info: - It happens on every browser that I have (IE, Firefox, Chrome). - The site was uploaded on 000webhost. - There're no problems retrieving the data.

Thanks in Advance.

Answer 1

Try

$(document).ready(function(){
  async().then(fetch);  
});

function fetch(){
  setTimeout(function(){
    async().then(fetch);
  }, 5000);
}

function async(){   
 return $.ajax({   
    type: 'GET',
    url: 'message.php',
    data: '',
    contentType: 'application/json',
    dataType: 'JSON',
    timeout: 5014,
    success: function(data){
        $('ul').children().remove();
        $.each(data, function(index, item){
            $('#lstip').append('<li>'+item.ip+'</li>');
            $('#lstmsg').append('<li>'+item.message+'</li>');
            $('#lstlike').append('<li><a href="message.php?like='+item.line+'">'
              +item.like+'</a></li>');
        });

    },
    error: function(xhr, stats, err){
        console.log(stats);
    }

}); 
}

---

$(document).ready(function(){
  async().then(fetch);  
});

function fetch(){
  setTimeout(function(){
    async().then(fetch);
  }, 5000);
}

function async(){   
 return $.ajax({

    method: 'GET',
    url: 'https://api.github.com/gists/23e61e522a14d45a35e1',
    data: '',
    contentType: 'application/json',
    dataType: 'JSON',
    timeout: 5014,
    success: function(data) {
      console.log(JSON.parse(data.files["a.json"].content));
       // $('ul').children().remove();
       // $.each(data, function(index, item){
       //     $('#lstip').append('<li>'+item.ip+'</li>');
       //     $('#lstmsg').append('<li>'+item.message+'</li>');
       //     $('#lstlike').append('<li><a href="message.php?like='+item.line+'">'
       //       +item.like+'</a></li>');
       // });

    },
    error: function(xhr, stats, err){
        console.log(stats);
    }

}); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

you can try setInterval()

$(document).ready(function(){
fetch();    
});

function fetch(){
setInterval(function(){
    async();
}, 5000);
}