Question

89

Run ajax every 30 seconds and show a countdown timer

rated 0 times [ 95] [ 6] / answers: 1 / hits: 5630 / 11 Years ago, thu, january 9, 2014, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynnb

Add To Favorites

Follow

Total Points: 402

Total Questions: 96

Total Answers: 109

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

kaitlynnb questions

1 'node_modules' is not recognized as an internal or external command, operable program or batch file

Tue, Oct 12, 21, 00:00, 3 Years ago

1 Cannot read properties of undefined (reading 'size')

Thu, Sep 16, 21, 00:00, 3 Years ago

1 How to Disable the ENTER Key in React Material UI Autocomplete form

Thu, Aug 26, 21, 00:00, 3 Years ago

1 Get only specific values in array of objects in JavaScript

Tue, Jun 23, 20, 00:00, 4 Years ago

1 Extracting parts of a text in Cypress

Mon, May 20, 19, 00:00, 5 Years ago

View All

answered 11 Years ago damiondenzelc · Accepted Answer

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..