javascript - Run ajax every 30 seconds and show a countdown timer - Stack Overflow

I have a function that I would like to run every 30 seconds. This works fine

$(document).ready(function(){
    setInterval(function() {
        jQuery.ajax({
            type: "GET",
            url: "loaddata.php",
            dataType:"json",
            success:function(response){
                if (response) {
                    // Process
                }
                else {
                    // Process 
                }
            }

        });
    }, 30000);
});

But I am trying to figure out how I could display a countdown timer that is inline with the setInterval. In other words it should show how many seconds is left before the ajax runs, once the function runs, it should reset the timer and count down from 30 seconds again. This process would continually repeat. I found several examples of countdown timers but I have no clue how to sync it up with ajax requests and have it reset.

Any help is greatly appreciated!

I have a function that I would like to run every 30 seconds. This works fine

$(document).ready(function(){
    setInterval(function() {
        jQuery.ajax({
            type: "GET",
            url: "loaddata.php",
            dataType:"json",
            success:function(response){
                if (response) {
                    // Process
                }
                else {
                    // Process 
                }
            }

        });
    }, 30000);
});

But I am trying to figure out how I could display a countdown timer that is inline with the setInterval. In other words it should show how many seconds is left before the ajax runs, once the function runs, it should reset the timer and count down from 30 seconds again. This process would continually repeat. I found several examples of countdown timers but I have no clue how to sync it up with ajax requests and have it reset.

Any help is greatly appreciated!

• javascript
• php
• ajax
• countdowntimer

Share Improve this question Follow edited Jan 9, 2014 at 14:17 Dipak Kumar Pusti 1,72322 gold badges2323 silver badges4242 bronze badges asked Jan 9, 2014 at 14:14 Joshua OldsJoshua Olds 17733 silver badges1111 bronze badges 1

• Just an addition to the solution of @dhsto, but without a (global) var and setIntveral(). Instead I've used a named function and setTimeout() - fiddle – Andreas Commented Jan 9, 2014 at 14:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Just run a function every second and have a counter that counts down to 0. When it hits 0, run your ajax code and reset the counter. Like so:

var count = 30;
setInterval(function() {
    count--;

    // update timer here

    if (count === 0) {
        count = 30;
        // ajax code here
    }
}, 1000);

Set the initial displayed value in your timer to 30. Then this will show 29,28,27,...,2,1,0,29,28, etc..