setInterval on a jQuery deferred object

Question

I am trying to better understand the use of deferred objects in jQuery.

The getData method below fetches some data asynchronously. When done, it should be displayed to some predefined (log) section by addToChart. This should happen periodically, hence my using setInterval inside getData's done handler.

function getData() {
    return $.ajax({
        url: 'https://demo-live-data.highcharts.com/time-data.csv',
        type: 'GET'
    });
}
getData().done(addToChart, function() {
    setInterval(getData, 1000);
});

function addToChart(data) {
    document.getElementById('log').innerText += data;
}

$(document).ready(function() {
    getData();
});

In above code, getData seems to get called only once. How do I let it be called periodically?

Also, is there any way to actually debug this code, rather than run it and scratch my head why it doesn't behave as expected? (I'm new to JavaSCript, in case you wonder). I stepped through the code using the Firefox debugger but that didn't help.

`setTimeout` will only run once. You want `setInterval`. Beyond that, what is not working? — Kevin Boucher, May 21 '18 at 17:48
Yes, @KevinBoucher is correct. And this question might be a duplicate. Check this answer https://stackoverflow.com/a/729943/4040563 — Zakher Masri, May 21 '18 at 17:53
@KevinBoucher Right, I changed the call to `setInterval`. However, it still executes only once. — bwcoder, May 21 '18 at 17:54

score 0 · Answer 1 · answered May 21 '18 at 17:50

0

You would need to do a while loop :

while (condition) {
    code block to be executed
}

or the do/while loop :

do {
    code block to be executed
}
while (condition);

answered May 21 '18 at 17:50

Bret Hawker

99
1
11

Long M K Nguyễn · Accepted Answer · 2018-05-21T18:07:13.507

0

setTimeout is used to delay a function https://www.w3schools.com/jsref/met_win_settimeout.asp

What you want to use is setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp

So looking at what you're trying to do, i would do it like this:

$(document).ready(function() {
    function getData() {
        $.ajax({
            url: 'https://demo-live-data.highcharts.com/time-data.csv',
            type: 'GET'
        }).done(addToChart);
    }

    function addToChart(data) {
        document.getElementById('log').innerText += data;
    }

    setInterval(getData, 1000);
});

edited May 21 '18 at 18:07

answered May 21 '18 at 17:51

Long M K Nguyễn

812
9
32

1

done syntax is incorrect. You are invoking `addToChart` immediately – charlietfl May 21 '18 at 18:06
@charlietfl just fixed that, thanks for catching that – Long M K Nguyễn May 21 '18 at 18:07
This works, but I wonder why things break if I try to decouple the data handler from the ajax request, i.e. I move the `done` handler out of the `getData` function: `getData.done(addToChart);` – bwcoder May 21 '18 at 18:51
1

@badweathercoder i haven't tested but u can decouple it further if you want to, moving `done` handler outside, so getData needs to return the ajax object `function getData() {return $.ajax(....);}`, then in the setInterval like this: `setInterval(function() { getData().done(addToChart); }, 1000);` – Long M K Nguyễn May 21 '18 at 19:01
Thanks, that fixed it. Any idea why this doesn't work: `setInterval(getData, 1000); getData.done(addToChart);`, while your suggestion `setInterval(function() { getData().done(addToChart); }, 1000);` works? – bwcoder May 21 '18 at 19:13
1

Because when you call `setInterval(getData, 1000)` it will only execute getData and doesn't acknowledge the callback for done, which you're calling on the next line and this is not connected to the setInterval – Long M K Nguyễn May 21 '18 at 19:26

charlietfl · Answer 3 · 2018-05-21T18:15:31.010

0

Move the done inside the function so it will get called every time the function does and request succeeds

function getData() {
  return $.ajax({
      url: 'https://demo-live-data.highcharts.com/time-data.csv',
      type: 'GET'
    })
    .then(addToChart)
    .always(function() {
      setTimeout(getData, 1000);
    });
}

Alternate approach is wrap what you are currently doing in a new function

function getData() {
  return $.ajax({
    url: 'https://demo-live-data.highcharts.com/time-data.csv',
    type: 'GET'
  });
}

function loadChart() {
  getData()
    .then(addToChart)
    .always(function() {
      setTimeout(loadChart, 1000);
    });

}

loadChart()

edited May 21 '18 at 18:15

answered May 21 '18 at 17:58

charlietfl

170,828
13
121
150

This seems similar to doing it the "old" jQuery way, where you define a `success` as success handler. I'd like to decouple the callback handling from the AJAX request as much as possible. – bwcoder May 21 '18 at 18:09
Then use a separate function that calls `getData` and put the timeout in that function and call the new function instead each time – charlietfl May 21 '18 at 18:11
See alternative approach – charlietfl May 21 '18 at 18:15

setInterval on a jQuery deferred object

3 Answers3