Multiple Ajax Calls calling on multiple timeouts in one page

Question

Summery: I have to get several data from a service(hosted on multiple servers) using C# and finally display them to the user/s, all on one page, using ajax call. Consider that the final display formats contains charts and progresses that have created by Jquery and styled by CSS.

Some Code:

// Once Called Here and Timer Will Go On
UpdateDataA();
function UpdateDataA() {
    $.ajax({
        type: "POST",
        async: true,
        url: "Default.aspx/GetData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {                               
            var $s = $(".second");
            $s.val(r.d[0]).trigger("change");
            updateProgressA(r.d[1]);
            updateProgressB(r.d[2]);
            updateNetworkData(bytesToSize(r.d[5], 2), bytesToSize(r.d[6], 2));
        },
        error: function (msg) {
            alert(msg.error);
        }

    });

    setTimeout(function () { UpdateDataA(); }, 1000);//Timer
}

Consider more calls like this.

Problem: Timer intervals doesn't update at intervals have set. One element updates correct then waits for others to complete while it shouldn't. But I need to update all continuously together. In this way, if one call crash, Others will be die.

Question: What can I do or What are my faults?

Note: I'm new to jquery and ajax.

Thank You previously

If they need to run together then why u do start the timer for dataB in dataA ? — DarkBee
– DarkBee, Commented Jul 24, 2013 at 8:33

DarkBee · Accepted Answer · 2013-07-24 08:59:04Z

Neglect my comment about interval. I think u will need to keep track of your timers :

timerA = setTimeout(function () { UpdateDataA(); }, 1000);

and clear the in the update function till task is complete

var timerA;

// Once Called Here and Timer Will Go On
UpdateDataA();
function UpdateDataA() {
    clearTimeout(timerA);
    $.ajax({
        type: "POST",
        async: true,
        url: "Default.aspx/GetData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {                               
            var $s = $(".second");
            $s.val(r.d[0]).trigger("change");
            updateProgressA(r.d[1]);
            updateProgressB(r.d[2]);
            updateNetworkData(bytesToSize(r.d[5], 2), bytesToSize(r.d[6], 2));
            timerA = setTimeout(function () { UpdateDataA(); }, 1000);//Restart time after task is complete
        },
        error: function (msg) {
            alert(msg.error);
        }

    });


}

Well as for if an error occurs, u should add a try catch arround the parts that can output an error. Javascript is not a multithreaded language. Meaning there will be always a small delay between the updates
Thank you indeed. Is there any other choice to update them all with less delay?
Unsure. The problem with this is that the data is fetched from a 3rd party, meaning there is no way to know/ensure that all the data will become available at the same time.

Collectives™ on Stack Overflow

Multiple Ajax Calls calling on multiple timeouts in one page

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related