setTimeout with ajax calls

Question

<script type="text/javascript">
   var timeOutID = 0;
   var checkScores = function() {
     $.ajax({
       url: "<?php echo 'http://127.0.0.1/ProgVsProg/main/countScoreCh'?>",
       success:function(response){
       if (response !=' ') {
         $('#scoreCh').html(response);
         clearTimeout(timeOutID);
       } else{
         timeOutID = setTimeout(checkScores, 3000);
       }
     });
   }
   timeOutID = setTimeout(checkScores,1000);
 </script>

I am using setTimeout if there is a change in the database. If there is a change..it will output the change.

My problem is setTimeout will only display the first call.and never checks again if there is another change in the database.

I don't know if setTimeout is the correct way of doing it.

I guess url: '127.0.0.1/ProgCsProg/main/countScoreCh' will be fine. No need to wrap in php tag. — Sachin Jain
– Sachin Jain, Commented Jan 4, 2014 at 4:17
If no change in the database, what is the server response code? — Daiwei
– Daiwei, Commented Jan 4, 2014 at 4:50

Michael Schock · Accepted Answer · 2014-01-04 04:30:18Z

2

Yeah, setTimeout only runs once though. You're looking for setInterval.

<script type="text/javascript">
    var timeOutID = 0;
    var checkScores = function() {
        $.ajax({
            url: "<?php echo 'http://127.0.0.1/ProgVsProg/main/countScoreCh'?>",
            success: function(response) {
                if(response !== '') {
                    $('#scoreCh').html(response);
                }
            }
        });
    };
    timeOutID = setInterval(checkScores, 1000);
</script>

You could also get it working by just getting rid of that else in your success function:

success: function(response) {
    if(response !== '') {
        $('#scoreCh').html(response);
    }
    timeOutID = setTimeout(checkScores, 3000);
},
error: function() {
    timeOutID = setTimeout(checkScores, 3000);
}

edited Jan 4, 2014 at 4:30

answered Jan 4, 2014 at 3:33

Michael Schock

5755 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sachin Jain Over a year ago

+1 .Just don't use clearInterval otherwise it won't get executed next time. OP wants to listen for database changes everytime.

Michael Schock Over a year ago

@blunderboy yeah, I was starting to think that might have been what he meant so I added the last suggestion.

Sachin Jain Over a year ago

No, you can not get it working by just removing else part. Consider whenever there is an error say Network error. Then you stop polling for database changes.

Sachin Jain Over a year ago

setInterval is the right way to do it and don't clear it. That's all will solve OP's problem.

Zurreal Over a year ago

i still try remove else..xD

|

Sachin Jain · Accepted Answer · 2014-01-04 05:18:58Z

1

You are making these mistakes

If you want to poll for database changes, don't use setTimeout. Instead use setInterval and clear this interval depending upon your logic like after 50times or something else.
Use a busyFlag because you are making an asynchronous call. (As suggested by @mike)

Try this

var intervalId = null;
var IS_BUSY_FETCHING_UPDATES = false;

var checkScores = function() {
  if (!IS_BUSY_FETCHING_UPDTAES) {
    IS_BUSY_FETCHING_UPDTAES = true;

    $.ajax({
      url: "http://127.0.0.1/ProgVsProg/main/countScoreCh" 
    }).done(function(response){
      if (response) {
        $('#scoreCh').html(response);
      }
    }).fail(function(e) {
      console.error(e);
    }).always(function() {
      IS_BUSY_FETCHING_UPDATES = false; // This will be executed when AJAX gets complete
    });
}

intervalID = setInterval(checkScores,1000);

edited Jan 4, 2014 at 5:18

answered Jan 4, 2014 at 4:43

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

9 Comments

Zurreal Over a year ago

i understand now by using flag..but by following your suggestion..it will not display the changes..jst like nothing happens.. "if(!IS_BUSY_FETCHING_UPDATAES) = true; "(spelling) i dont know if you did that in purpose.. i change but the output will not display..:(

Sachin Jain Over a year ago

I removed PHP tag from the URL. Does that have to do anything ?

Sachin Jain Over a year ago

Can you use chrome debugger to see if you are getting response or not ? Use console.log(response) in done method to see what are you getting.

Zurreal Over a year ago

there is an error. Failed to load resource: the server responded with a status of 404 (Not Found) 127.0.0.1/ProgVsProg//js/jquery.min.js event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught SyntaxError: Unexpected end of input checkdbRequest:20 is that what you mean?

Sachin Jain Over a year ago

That means your server is not sending you the right response right ?

|

Collectives™ on Stack Overflow

setTimeout with ajax calls

2 Answers 2

6 Comments

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Related