jQuery - Call ajax every 10 seconds

Question

I have a mysql feedback database constructed like this:

name | location | feedback

Ryan | England | great support

Obviously there's more entries than that. I am trying to build a feedback div, where it displays a new feedback item every 10 seconds via ajax.

So I have constructed this:

$(document).ready(function(){
   new get_fb(); 
 });

function get_fb(){
var feedback = $.ajax({//Ajax
                        type: "POST",
                        url: "feedback.php",
                        async: false
                        }).responseText;//end of ajax

$('div.feedback-box').html(feedback).delay(10000).queue(function() {
    new get_fb(); 
    });
}

And here's my PHP file:

$result = mysql_query("SELECT * FROM feedback ORDER BY RAND() LIMIT 0,1");
while($row = mysql_fetch_array($result))
{
    $name = $row['name'];
    $location = $row['location'];
    $feedback = $row['feedback'];

    echo "
    <p>Name: $name, Location: $location, Feedback: $feedback.</p>
    ";
}

However, this only shows two. It doesn't keep showing new ones, it purely shows the first then the second and stops.

What am I doing wrong? Thanks :)

Jared Farrish · Accepted Answer · 2017-06-19T00:13:52.750

73

Are you going to want to do a setInterval()?

setInterval(function(){get_fb();}, 10000);

Or:

setInterval(get_fb, 10000);

Or, if you want it to run only after successfully completing the call, you can set it up in your .ajax().success() callback:

function get_fb(){
    var feedback = $.ajax({
        type: "POST",
        url: "feedback.php",
        async: false
    }).success(function(){
        setTimeout(function(){get_fb();}, 10000);
    }).responseText;

    $('div.feedback-box').html(feedback);
}

Or use .ajax().complete() if you want it to run regardless of result:

function get_fb(){
    var feedback = $.ajax({
        type: "POST",
        url: "feedback.php",
        async: false
    }).complete(function(){
        setTimeout(function(){get_fb();}, 10000);
    }).responseText;

    $('div.feedback-box').html(feedback);
}

Here is a demonstration of the two. Note, the success works only once because jsfiddle is returning a 404 error on the ajax call.

http://jsfiddle.net/YXMPn/

edited Jun 19 '17 at 00:13

answered Apr 16 '11 at 15:44

Jared Farrish

48,585
17
95
104

1

I noticed I had eliminated the `.responseText` portion of the code, which would have broken the functionality. See my last edit. – Jared Farrish Apr 16 '11 at 15:55
1

Just coming back to this project of mine. Is this suitable for use? I mean will it cause strain on the server? The website is only a electrical company not a large scale really. :/ – ryryan May 12 '11 at 20:49
2

If it's every ten seconds, only after the last one completes for a user, and you have a relatively small user base (<500 concurrent), I imagine you'll be fine. You just have to make sure your PHP script is optimized. – Jared Farrish May 12 '11 at 22:52
Take into account if you put it in your success callback, it will duplicate every time. That's not the correct way it should be done if it's a function. – Blake Connally Dec 28 '16 at 00:39
Once I used setInterval for ajax with 5 seconds interval and let the page opened for continuous 6 hours and the whole browser hanged, CPU usage was 23+% all the time (almost one core at 100% since it was on dual core hyperthreaded CPU). It looks like setInterval causes kind of cpu/memory leak and very unreliable for your clients if they keep watching your webpage for a long time. – falero80s Aug 30 '17 at 13:10

score 19 · Answer 2 · edited Apr 16 '11 at 15:57

19

setInterval(function()
{ 
    $.ajax({
      type:"post",
      url:"myurl.html",
      datatype:"html",
      success:function(data)
      {
          //do something with response data
      }
    });
}, 10000);//time in milliseconds

edited Apr 16 '11 at 15:57

Maerlyn

33,687
18
94
85

answered Apr 16 '11 at 15:46

Muhammad Adeel Zahid

17,474
14
90
155

@Muhammed - You have a misaligned double quote on the url property. – Jared Farrish Apr 16 '11 at 15:56
is it good to add this code when page have lots of jquery functions and data on a current page – TarangP Jan 05 '18 at 07:53
It's better to use setTimeout. SetInterval will hit the the server regardless whether the previous call was stil running or not. – The concise Oct 27 '21 at 10:34

score 4 · Answer 3 · answered Apr 16 '11 at 15:44

4

You could try setInterval() instead:

var i = setInterval(function(){
   //Call ajax here
},10000)

answered Apr 16 '11 at 15:44

Calum

5,308
1
22
27

score 3 · Answer 4 · answered May 08 '20 at 11:01

3

This worked for me

setInterval(ajax_query, 10000);

function ajax_query(){
   //Call ajax here
}

answered May 08 '20 at 11:01

Feshibaba

89
1
6

jQuery - Call ajax every 10 seconds

4 Answers4

Linked

Related