Geek Answers Handbook

Json update every x seconds SetInterval

I made this script to get some json info:

$(document).ready(function(){ $.ajax({ url: 'url', dataType: 'json', cache: true, timeout: 30000, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); }); }, error: function(){ $('#output ul').append('<li>Error'); } }); });

But I want to update the feed every x seconds. I read a lot about this, but I can do it.

How can i do this?

+4
source share
4 answers

Use setInterval to call the code block again and put your code in some function and first pass the function name to the setInterval parameter. You can pass an anonymous function instead of creating a new function like repeatMe , but I would prefer to make a function to make the code more readable.

 function repeatMe(){ $.ajax({ url: 'url', dataType: 'json', cache: true, timeout: 30000, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); }); }, error: function(){ $('#output ul').append('<li>Error'); } }); } setInterval(repeatMe, 5000);

Change It is better to use setTimeout instead of setInterval in success to send the next update call after the first has completed its job. We will also put setTimeout in error to save the callback for the update.

 function repeatMe(){ $.ajax({ url: 'url', dataType: 'json', cache: true, timeout: 30000, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); setTimeout(repeatMe, 5000); }); }, error: function(){ $('#output ul').append('<li>Error'); setTimeout(repeatMe, 5000); } }); }
+2
source 
 var foo = function() { $.ajax({ url: 'url', dataType: 'json', cache: true, timeout: 30000, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); }); }, error: function(){ $('#output ul').append('<li>Error'); } }); setTimeout(foo, 3000); } foo();

3000 is the milliseconds you want to wait before calling the function again.

+2
source 
 setInterval(function(){ $.ajax({ url: 'url', dataType: 'json', cache: true, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); }); }, error: function(){ $('#output ul').append('<li>Error'); } }); },30000); //30000 == 30 seconds
+1
source 
 $(document).ready(function(){ setInterval(function() { $.ajax({ url: 'url', dataType: 'json', cache: true, timeout: 30000, success: function(data) { // $('#output ul').append('<li>The feed loads fine'); $('#output ul').empty(); $.each(data.posts, function(i,data){ $('#output ul').append('<li><a href="'+data.image+'"><img class="thumb" src="'+data.image+'" alt="" /></a><h3>'+data.title+'</h3><p>'+data.text+'</p></li>'); }); }, error: function(){ $('#output ul').append('<li>Error'); } }); }, 1000 * x); });

The code should work fine. Just set the required number of seconds instead of x here: 1000 *x

Just remember that you must pass a function pointer to setInterval as the first parameter. if you just setInterval($.ajax({...}), x) , you really say that the function returned by $ .ajax should execute every x seconds. But it returns a jQuery object, not a function. This is why in my ajax code wrapped function() {}

+1
source

More articles:


All Articles