Javascript timer Usage

Question

I have a case in my page,there i have six widgets(ie div) and each one calling one ajax function on different intervals(One div interval may be 20s,othere one it will be 30s).After getting result from server,i will update corresponding panels.Which is the best way to handle this scenario.Is it a good practice to keep six different javascript timers for each of this panels(eg:like setInterval,setTimeout).If not,what is the best way to handle this scenario.

If they are updated simultaneously - just have a single timer that fires each 20 seconds — zerkms
– zerkms, Commented Jan 4, 2013 at 6:10
Are the ajax functions different for each div? Is there anyway you can club the requests? — ATOzTOA
– ATOzTOA, Commented Jan 4, 2013 at 6:12
And use JSON is order to send more that one information at the same time — Slackware
– Slackware, Commented Jan 4, 2013 at 6:13

ATOzTOA · Accepted Answer · 2013-01-04 12:07:50Z

2

Solution:

duration = 20;

(function getMoreData(divIndex) {
    console.log("Process First");

    // Get ajax data for first div
    $.ajax({
        url: url1,
        dataType: 'json',
        data: "",
        timeout: 5000,
        success: function(data) {
                dataFlag[divIndex]= true;

                // Process data...
                // Update "div 1"
            },
        error: function() {
                dataFlag[divIndex]= true;

                // Process error
            }
    });


    // Second div
    console.log("Process Second");


    // Get ajax data for second div
    $.ajax({
        url: url2,
        dataType: 'json',
        data: "",
        timeout: 5000,
        success: function(data) {
                dataFlag[divIndex]= true;

                // Process data...
                // Update "div 2"
            },
        error: function() {
                dataFlag[divIndex]= true;

                // Process error
            }
    });


    // Third div
    console.log("Process Third");


    // Get ajax data for second div
    $.ajax({
        url: url3,
        dataType: 'json',
        data: "",
        timeout: 5000,
        success: function(data) {
                dataFlag[divIndex]= true;

                // Process data...
                // Update "div 3"
            },
        error: function() {
                dataFlag[divIndex]= true;

                // Process error
            }
    });


    setTimeout(getMoreData, (duration * 1000));
})()

edited Jan 4, 2013 at 12:07

answered Jan 4, 2013 at 6:18

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

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

26 Comments

vmb Over a year ago

i didn get the usage of dataFlag.After getting result from server i need to update corresponding div.How can i do this.currently getMoreData not taking any parameters.Also there is a case that interval of each of these panels is different.

ATOzTOA Over a year ago

I have updated the answer with more explanation. You will have to update the div when the ajax success happens. Why do you need the interval to be different?

vmb Over a year ago

i want to design it like,all divs will call one common function by accepting one parameter.Also is it cpu intensive?if we are create settimeout for each six div,is it cpu intensive?each one will create an instance ...right?

vmb Over a year ago

different intervals bcoz,each panel having different functionality

vmb Over a year ago

@ATOzTOA..thanks for quick responses.I want to know whetehr is any way to manage it using Single Timer.Even i dont want to initalize all timers initially.

|

Collectives™ on Stack Overflow

Javascript timer Usage

1 Answer 1

26 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

26 Comments

Your Answer

Sign up or log in

Post as a guest

Related